/* ==========================================================================
   Odeko Brand Design System — Tokens
   Colors, type, spacing, radius, shadows, motion
   ==========================================================================

   HOW TO USE:
   Include this file in any HTML artifact you build for Odeko:
     <link rel="stylesheet" href="colors_and_type.css">

   All tokens are exposed as CSS variables on :root. Reference them directly
   (var(--odeko-yellow)) or via the utility classes at the bottom of this file.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Fonts — self-hosted. Paths assume this CSS sits at the project root next
   to /fonts. If you move it, update the url()s below.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Residenz Grotesk";
  src: url("fonts/ResidenzGrotesk-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Residenz Grotesk";
  src: url("fonts/ResidenzGrotesk-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Residenz Grotesk";
  src: url("fonts/ResidenzGrotesk-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-Medium.woff2") format("woff2"),
       url("fonts/Roobert-Medium.woff") format("woff"),
       url("fonts/Roobert-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* No bold-italic face: fonts/Roobert-BoldItalic.otf was referenced here but
   never committed, and nothing on the site pairs font-weight:700 with
   italic — browsers already fell back silently. Removed rather than
   sourcing a file to satisfy an unused rule. */


/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Core brand palette ------------------------------------------------
     Odeko's identity is a near-monochrome pairing of a saturated warm yellow
     ("Odeko Yellow") against a deep, almost-black brown ("Mocha"). Ecru is
     the cream paper color used for large text blocks and surfaces where
     pure white would feel clinical.
  ------------------------------------------------------------------------- */
  --odeko-yellow:      #FFD100;   /* primary — buttons, highlights, CTAs */
  --odeko-yellow-alt:  #FFDF00;   /* secondary yellow — accents, gradients */
  --odeko-mocha:       #40180B;   /* primary ink — text, surfaces, logo */
  --odeko-ecru:        #FFFFDF;   /* cream surface — large type blocks */
  --odeko-white:       #FFFFFF;   /* pure white — rare, product screens only */
  --odeko-black:       #000000;   /* true black — use sparingly, for print */

  /* --- Supporting accents -----------------------------------------------
     Used at ~5% frequency total. Saturated reds/oranges appear in lifestyle
     photography and the occasional highlight sticker. Do not introduce new
     hues without design review.
  ------------------------------------------------------------------------- */
  --odeko-red:         #FF4200;   /* energy accent — deal stickers, badges */
  --odeko-red-deep:    #DB4414;   /* darker red — hover states on accents */
  --odeko-mocha-warm:  #40330B;   /* warm secondary brown — product labels */

  /* --- Neutrals (only when brand colors are not available) --------------
     Keep neutral usage minimal. On brand surfaces prefer tinted mocha over
     gray wherever possible (e.g. mocha at 70% opacity on yellow).
  ------------------------------------------------------------------------- */
  --n-50:              #F5F0EC;
  --n-100:             #F0F0E8;
  --n-200:             #DCDCDC;
  --n-300:             #D8D8D8;
  --n-400:             #B6B6B6;
  --n-500:             #43423D;
  --n-600:             #2D2D2D;
  --n-700:             #000000;

  /* --- Semantic surfaces ------------------------------------------------- */
  --bg-page:           var(--odeko-ecru);
  --bg-surface:        var(--odeko-white);
  --bg-accent:         var(--odeko-yellow);
  --bg-inverse:        var(--odeko-mocha);
  --text-primary:      var(--odeko-mocha);
  --text-on-yellow:    var(--odeko-mocha);
  --text-on-mocha:     var(--odeko-ecru);
  --text-muted:        rgba(64, 24, 11, 0.7);
  --border-soft:       rgba(64, 24, 11, 0.12);
  --border-default:    var(--odeko-mocha);

  /* --- Type families ----------------------------------------------------- */
  --font-display:      "Residenz Grotesk", "Times New Roman", Georgia, serif;
  --font-text:         "Roobert", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:         "ABC Diatype Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Display (Residenz Grotesk) ----------------------------------------
     Residenz Grotesk is our editorial voice: big, confident, set tightly.
     Use Regular for headlines, Medium for subheads, Bold ALL-CAPS for CTAs
     and eyebrows.
  ------------------------------------------------------------------------- */
  --display-xxl-size:  clamp(56px, 7vw, 120px);
  --display-xxl-lh:    1.08;
  --display-xxl-ls:    0.01em;
  --display-xxl-weight: 500;

  --display-xl-size:   clamp(44px, 5vw, 80px);
  --display-xl-lh:     1.12;
  --display-xl-ls:     0.01em;
  --display-xl-weight: 500;

  --display-lg-size:   clamp(32px, 3.6vw, 56px);
  --display-lg-lh:     1.18;
  --display-lg-ls:     0.01em;
  --display-lg-weight: 400;

  --display-md-size:   clamp(24px, 2.4vw, 40px);
  --display-md-lh:     1.22;
  --display-md-ls:     0.01em;
  --display-md-weight: 500;

  /* --- Eyebrow / CTA (Residenz Grotesk Bold UPPERCASE) ------------------- */
  --eyebrow-size:      14px;
  --eyebrow-lh:        1.39;
  --eyebrow-ls:        0.08em;   /* 8% tracking per brand guide */
  --eyebrow-weight:    700;

  --cta-size:          16px;
  --cta-lh:            1.39;
  --cta-ls:            0.02em;
  --cta-weight:        700;

  /* --- Body (Roobert) ----------------------------------------------------
     Roobert Regular is body copy. Sentence case, 0 tracking, 150% leading.
     Medium for UI labels and emphasis. SemiBold for product/navigation.
  ------------------------------------------------------------------------- */
  --body-lg-size:      20px;
  --body-lg-lh:        1.5;
  --body-lg-weight:    400;

  --body-md-size:      16px;
  --body-md-lh:        1.5;
  --body-md-weight:    400;

  --body-sm-size:      14px;
  --body-sm-lh:        1.45;
  --body-sm-weight:    400;

  --caption-size:      12px;
  --caption-lh:        1.4;
  --caption-ls:        0.01em;
  --caption-weight:    400;

  /* --- Product UI -------------------------------------------------------- */
  --ui-label-size:     15px;
  --ui-label-lh:       1.3;
  --ui-label-weight:   500;

  /* --- Spacing (4px base) ------------------------------------------------ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Radius -----------------------------------------------------------
     Odeko is mostly sharp-cornered. Radius is reserved for product UI
     (buttons, cards) and app icon surfaces. Full pills are used for
     product CTAs and tag chips.
  ------------------------------------------------------------------------- */
  --radius-0:   0;
  --radius-sm:  2px;
  --radius-md:  6px;
  --radius-lg:  12px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* --- Shadow -----------------------------------------------------------
     Shadows are soft and warm-brown tinted. Never drop-shadow on the
     yellow background — it flattens and muddies. Use sparingly.
  ------------------------------------------------------------------------- */
  --shadow-sm:  0 2px 8px rgba(64, 24, 11, 0.08);
  --shadow-md:  0 10px 30px rgba(64, 24, 11, 0.10);
  --shadow-lg:  0 16px 54px rgba(64, 24, 11, 0.12);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-med:    220ms;
  --dur-slow:   400ms;

  /* --- Grain — the "snap" accent ----------------------------------------
     Odeko's signature graphic device is a chevron/arrow-tag shape with a
     yellow gradient that fades into the brand color. It communicates
     "on the way", "incoming", or "tap to reveal". See SKILL.md.
  ------------------------------------------------------------------------- */
  --snap-gradient: linear-gradient(180deg, var(--odeko-yellow) 0%, rgba(255, 209, 0, 0) 83%);
}


/* --------------------------------------------------------------------------
   Baseline — opinionated, applied when you add class="odeko" to <body>
   -------------------------------------------------------------------------- */

body.odeko {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* --------------------------------------------------------------------------
   Utility classes — convenience wrappers around the tokens above
   -------------------------------------------------------------------------- */

/* Type scale */
.odk-display-xxl {
  font-family: var(--font-display);
  font-weight: var(--display-xxl-weight);
  font-size: var(--display-xxl-size);
  line-height: var(--display-xxl-lh);
  letter-spacing: var(--display-xxl-ls);
}
.odk-display-xl {
  font-family: var(--font-display);
  font-weight: var(--display-xl-weight);
  font-size: var(--display-xl-size);
  line-height: var(--display-xl-lh);
  letter-spacing: var(--display-xl-ls);
}
.odk-display-lg {
  font-family: var(--font-display);
  font-weight: var(--display-lg-weight);
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-lh);
  letter-spacing: var(--display-lg-ls);
}
.odk-display-md {
  font-family: var(--font-display);
  font-weight: var(--display-md-weight);
  font-size: var(--display-md-size);
  line-height: var(--display-md-lh);
  letter-spacing: var(--display-md-ls);
}
.odk-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--eyebrow-weight);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-lh);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
}
.odk-cta-text {
  font-family: var(--font-display);
  font-weight: var(--cta-weight);
  font-size: var(--cta-size);
  line-height: var(--cta-lh);
  letter-spacing: var(--cta-ls);
  /* Sentence case — "Get started". Cased as authored. */
}
.odk-body-lg {
  font-family: var(--font-text);
  font-weight: var(--body-lg-weight);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
}
.odk-body { /* default — same as --body-md */
  font-family: var(--font-text);
  font-weight: var(--body-md-weight);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
}
.odk-body-sm {
  font-family: var(--font-text);
  font-weight: var(--body-sm-weight);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-lh);
}
.odk-caption {
  font-family: var(--font-text);
  font-weight: var(--caption-weight);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  letter-spacing: var(--caption-ls);
}

/* Surfaces */
.odk-surface-yellow { background: var(--odeko-yellow); color: var(--odeko-mocha); }
.odk-surface-mocha  { background: var(--odeko-mocha);  color: var(--odeko-ecru); }
.odk-surface-ecru   { background: var(--odeko-ecru);   color: var(--odeko-mocha); }
.odk-surface-white  { background: var(--odeko-white);  color: var(--odeko-mocha); }

/* Buttons ---------------------------------------------------------------
   Odeko's default CTA is a sharp rectangle, yellow fill, mocha text,
   sentence-case label in Residenz Grotesk Bold with 2% tracking. Alternative
   is the inverse: mocha fill, white text.
   ---------------------------------------------------------------------- */
.odk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 18px 32px;
  border: 0;
  border-radius: var(--radius-0);
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--cta-size);
  letter-spacing: var(--cta-ls);
  line-height: 1;
  /* Sentence case — buttons should be written "Get started", not "get started" */
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.odk-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.odk-btn:active { transform: translateY(0); }

.odk-btn--mocha { background: var(--odeko-mocha); color: var(--odeko-white); }
.odk-btn--outline {
  background: transparent;
  color: var(--odeko-mocha);
  box-shadow: inset 0 0 0 2px var(--odeko-mocha);
}
.odk-btn--pill { border-radius: var(--radius-full); padding-inline: 36px; }

/* The "Snap" tag — the signature angled chevron badge with a yellow fade.
   Good for status pills like "order on the way" or "incoming!"
   ---------------------------------------------------------------------- */
.odk-snap {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 28px 10px 20px;
  background: var(--odeko-mocha);
  color: var(--odeko-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
}
.odk-snap::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 44%;
  background: var(--odeko-ecru);
  clip-path: polygon(0 0, 100% 0, calc(100% + 18px) 100%, 0 100%);
  z-index: -1;
}
.odk-snap::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 44%;
  background: var(--snap-gradient);
  clip-path: polygon(0 0, 100% 0, calc(100% + 18px) 100%, 0 100%);
  z-index: -1;
}

/* Cards / panes */
.odk-card {
  background: var(--odeko-white);
  border: 1px solid var(--border-soft);
  padding: var(--space-8);
}
.odk-card--mocha {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
  border: 0;
}
.odk-card--yellow {
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  border: 0;
}

/* Focus ring — always mocha on light, yellow on dark */
.odk-focus-ring:focus-visible {
  outline: 3px solid var(--odeko-mocha);
  outline-offset: 3px;
}
.odk-surface-mocha .odk-focus-ring:focus-visible,
.odk-card--mocha   .odk-focus-ring:focus-visible {
  outline-color: var(--odeko-yellow);
}