/* =============================================================================
   @elements/style — tokens

   The shared foundation for both the customer boilerplate (the default scaffold
   voice) and the Elements brand site (elements.dev). Identical tokens; voices
   override only a handful.

   Customer (default):
     --accent      → --ink   (primary button is black until customer brands it)
     --accent-deep → --accent (links/hover inherit the accent color)
     --font-ui     → --font-sans (body/UI in Plex Sans)

   Customers brand the scaffold by overriding just three things in their
   app/styles/global.css:
     --accent        (their brand color)
     --brand-name    (used in footer credit text)
     --brand-email   (used in footer credit text)

   Elements brand site overrides:
     --accent      → --sky
     --accent-deep → --sky-deep (cornflower)
     --accent-soft → --sky-soft
     --font-ui/body → --font-mono

   Layers (bottom wins):
     1. Surfaces        — bg / bg-soft / bg-panel / bg-canvas
     2. Ink             — text ramp from full-ink to faint
     3. Rules           — border colors
     4. Sky family      — raw brand palette, always available
     5. Accent          — voice-overridable (defaults to ink)
     6. Semantic        — green / amber / danger for status
     7. Terminal        — dark palette for code / terminal blocks
     8. Fonts           — IBM Plex Mono + Sans stacks
     9. Type / space    — scale
    10. Radii / shadow  — minimal
============================================================================= */

:root {
  /* ─── Surfaces ──────────────────────────────────────────────────────── */

  --bg:         #ffffff;
  --bg-soft:    #fbfbfa;   /* sidebar, subtle card backgrounds */
  --bg-canvas:  #f6f5f2;   /* page canvas (signin/signup backdrop) */
  --bg-panel:   #f6f5f2;   /* inline code background */

  /* ─── Ink / text ────────────────────────────────────────────────────── */

  --ink:        #17171a;   /* primary text */
  --ink-soft:   #52535a;   /* secondary text */
  --ink-dim:    #92939a;   /* tertiary / meta */
  --ink-faint:  #c8c9cd;   /* quiet icons, placeholders, rule-border alt */

  /* ─── Rules / borders ───────────────────────────────────────────────── */

  --rule:       #ececec;   /* default borders */
  --rule-soft:  #f4f4f3;   /* internal row dividers */

  /* ─── Sky family · raw brand palette ────────────────────────────────
     The Elements brand color, always available regardless of voice.
     Customer boilerplate uses --sky only in the "Built with Elements"
     footer credit — the rest of their site uses --accent (which
     defaults to ink). Brand voice aliases --accent to --sky. */

  --sky:        #6a9cd6;                 /* fill: brand mark, markers, pills */
  --sky-deep:   #4a7bc4;                 /* cornflower: text, links, accent phrases */
  --sky-soft:   #eef4fb;                 /* wash: callout/announcement backgrounds */
  --sky-dot:    rgba(74, 123, 196, 0.3); /* dotted underline under sky-text */
  --sky-wash:   rgba(74, 123, 196, 0.08);/* code-in-callout backdrop */

  /* ─── Accent · voice-overridable ─────────────────────────────────────
     Defaults to ink (customer voice). Brand voice and branded customers
     override --accent. --accent-deep follows --accent unless explicitly
     set. --accent-soft defaults to --bg-soft so callouts render cleanly
     even without an accent tint.

     Test when in doubt:
       fill with white glyph on top        → --accent
       text on white or bg-soft            → --accent-deep
       text on --accent-soft               → --accent-deep
       dotted underline under accent text  → --accent-dot

     Primary buttons are always ink — --accent is for marks, accents,
     and (in customer voice) the primary CTA. */

  --accent:       var(--ink);                  /* customer default; brand voice → sky */
  --accent-deep:  var(--accent);               /* follows accent unless overridden */
  --accent-soft:  var(--bg-soft);              /* neutral until overridden */
  --accent-dot:   rgba(23, 23, 26, 0.22);      /* ink-alpha; brand voice → sky-dot */
  --accent-wash:  rgba(23, 23, 26, 0.04);      /* ink-wash; brand voice → sky-wash */

  /* ─── Semantic · status ───────────────────────────────────────────── */

  --green:       #3f6b3a;   /* success, answered, show-and-tell */
  --green-soft:  #eef5ec;
  --green-dot:   rgba(63, 107, 58, 0.18);

  --amber:       #a77820;   /* unanswered questions, caution */
  --amber-soft:  #fef6e5;

  --danger:      #b13a2a;   /* error, destructive action */
  --danger-soft: #fcefed;

  /* ─── Terminal palette ─────────────────────────────────────────────
     Softer near-black, NOT pure ink — this is how terminal blocks
     distinguish themselves from ink buttons visually. */

  --term-bg:      #1d1d22;
  --term-ink:     #e8e6e0;
  --term-dim:     #6e6e76;
  --term-green:   #7fa874;
  --term-orange:  #e87550;
  --term-amber:   #d4a24a;

  /* ─── Fonts ─────────────────────────────────────────────────────────
     Plex Sans is the UI default (customer voice). Plex Mono is used for
     code, metadata, eyebrows, terminal chrome, and the footer credit.

     The Elements brand voice overrides --font-ui / --font-body to mono
     so ~95% of surfaces render in Plex Mono. Customers typically leave
     these alone — sans is the neutral default for a florist's site. */

  --font-mono:
    'IBM Plex Mono',
    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --font-sans:
    'IBM Plex Sans',
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;

  --font-ui:       var(--font-sans);   /* customer default; brand voice → mono */
  --font-body:     var(--font-sans);   /* customer default; brand voice → mono */
  --font-prose:    var(--font-sans);   /* long-form reading */
  --font-heading:  var(--font-sans);
  --font-code:     var(--font-mono);

  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  /* ─── Type scale ────────────────────────────────────────────────────
     Named by role rather than size. Sizes tuned for mono at 13px base. */

  --text-2xs:   0.6875rem;   /* 11   — tiny meta, row stats */
  --text-xs:    0.75rem;     /* 12   — footnotes, fineprint */
  --text-sm:    0.8125rem;   /* 13   — UI default */
  --text-md:    0.9375rem;   /* 15   — section prose, form values */
  --text-lg:    1.0625rem;   /* 17   — hero subtitle body */
  --text-xl:    1.375rem;    /* 22   — section titles (H2) */
  --text-2xl:   1.625rem;    /* 26   — card headlines (signin/signup) */
  --text-3xl:   2.375rem;    /* 38   — page H1 */
  --text-4xl:   3.25rem;     /* 52   — celebration H1 (welcome aboard) */
  --text-5xl:   4.5rem;      /* 72   — splash display (welcome to elements) */

  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-body:    1.55;
  --leading-relaxed: 1.7;

  --tracking-tighter: -0.035em;  /* display headlines */
  --tracking-tight:   -0.025em;  /* H1 */
  --tracking-snug:    -0.02em;   /* H2 */
  --tracking-normal:  -0.01em;   /* wordmark, buttons */
  --tracking-wide:     0.04em;   /* terminal copy-btn */
  --tracking-widest:   0.14em;   /* eyebrow labels, action verbs */

  /* ─── Space ───────────────────────────────────────────────────────── */

  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem;
  --space-1:    0.25rem;
  --space-1-5:  0.375rem;
  --space-2:    0.5rem;
  --space-2-5:  0.625rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-7:    1.75rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-14:   3.5rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;

  /* Vertical rhythm between adjacent text blocks. These were missing
     from the old system and every page reinvented them; they're canon
     now. */
  --gap-head-sub:   0.75rem;    /* title → subtitle inside a card / section */
  --gap-head-body:  1.25rem;    /* page heading → first body paragraph */
  --gap-section:    2.25rem;    /* between major section blocks */

  /* ─── Containers ──────────────────────────────────────────────────── */

  --container-narrow:   440px;   /* auth cards */
  --container-prose:    680px;   /* article + welcome-aboard single col */
  --container-marketing: 820px;  /* landing shell */
  --container-shell:    880px;   /* account / purchase right col width */
  --container-wide:     1080px;  /* community with sidebar, account with topbar */
  --container-padding:  var(--space-8);

  /* ─── Radii · near-rectangular ─────────────────────────────────────── */

  --radius-xs:   3px;   /* code inline, pills */
  --radius-sm:   5px;   /* brand mark at 26px, form pills */
  --radius-md:   6px;   /* buttons, inputs */
  --radius-lg:   7px;   /* terminal blocks, primary CTA */
  --radius-xl:   10px;  /* cards, panels */
  --radius-2xl:  12px;  /* auth card, hero surfaces */
  --radius-full: 9999px;

  /* ─── Shadows · minimal, borders do the work ──────────────────────── */

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 8px 16px -4px rgba(0, 0, 0, 0.08);

  /* ─── Focus ─────────────────────────────────────────────────────────
     No halos anywhere. Inputs get a crisp border-color darken; buttons
     and toggles get a crisp solid outline with 2px offset. */

  --focus-border-color:  var(--ink);

  /* ─── Motion ───────────────────────────────────────────────────────── */

  --duration-fast:   100ms;
  --duration-normal: 150ms;
  --duration-slow:   220ms;

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ─── Consumed · inputs ───────────────────────────────────────────── */

  --input-height:        2.75rem;    /* 44px — comfortable for landing/signup */
  --input-height-sm:     2rem;        /* 32px — dashboard density */
  --input-height-lg:     3rem;        /* 48px — hero density */
  --input-padding-x:     0.75rem;
  --input-padding-y:     0.625rem;
  --input-radius:        var(--radius-md);
  --input-font-size:     1rem;                 /* 16px — below this ios safari
                                                  auto-zooms on focus. baked into
                                                  the default so every customer's
                                                  forms avoid the iOS zoom quirk
                                                  without needing a media query. */
  --input-bg:            var(--bg);
  --input-border:        var(--rule);
  --input-border-focus:  var(--focus-border-color);
  --input-placeholder:   var(--ink-faint);

  /* ─── Consumed · buttons ──────────────────────────────────────────── */

  --button-height:       2.75rem;    /* 44px — matches input */
  --button-height-sm:    2.25rem;    /* 36px */
  --button-height-lg:    3rem;       /* 48px — hero CTA */
  --button-padding-x:    1.125rem;
  --button-radius:       var(--radius-md);
  --button-font-size:    var(--text-sm);
  --button-font-weight:  var(--font-medium);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}