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

   Shared foundation for both the customer scaffold and the elements.dev
   brand site. Identical tokens; voices override only a handful.

   Customer (default):
     --accent      → --ink   (primary CTA is black until customer brands it)
     --accent-deep → --accent (links/hover inherit the accent color)
     --font-sans   → system   (no foundry license needed; OS picks the face)

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

   Elements brand site overrides (server/app/styles/global.css):
     --accent      → --blue
     --accent-deep → --blue-dark
     --font-sans   → 'Colfax', system-ui, …
     --font-mono   → 'Fira Code', ui-monospace, …

   Layers:
     1. Surfaces        — bg / bg-soft / bg-panel / bg-canvas
     2. Ink             — text ramp from full-ink to faint
     3. Rules           — border colors
     4. Brand palette   — sky/blue/coral/teal/purple, always available
     5. Accent          — voice-overridable (defaults to ink)
     6. Semantic        — green / yellow / red / amber for status
     7. Terminal        — dark palette for code / terminal blocks
     8. Fonts           — system stacks
     9. Type / space    — scale (h1 56 → body 14)
    10. Radii / shadow  — minimal
============================================================================= */

:root {
  /* ─── Surfaces ────────────────────────────────────────────────────────
     Cool neutral whites — pair cleanly with the sky-blue brand. */

  --bg:         #ffffff;
  --bg-soft:    #fafbfc;   /* sidebar, subtle card backgrounds */
  --bg-canvas:  #E4EBF2;   /* page canvas (signin/signup backdrop) — grey08 */
  --bg-panel:   #E4EBF2;   /* inline code bg, editor chrome — grey08 */
  --bg-dark:    #0a0a0e;   /* dark chrome (dark topbar, terminals) */

  /* ─── Ink / text ──────────────────────────────────────────────────────
     Navy ink instead of pure near-black — slightly warmer, reads well
     against the sky brand color and the cool greys. */

  --ink:        #102C42;   /* primary text — `dark` from brand palette */
  --ink-soft:   #6E8499;   /* secondary text — `grey50` */
  --ink-dim:    #A0AFBE;   /* tertiary / meta — `grey32` */
  --ink-faint:  #C9D2DB;   /* quiet icons, placeholders — `grey15` */
  --ink-dark:   #ffffff;   /* text on dark chrome */

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

  --rule:       #C9D2DB;   /* default borders — grey15 */
  --rule-soft:  #E4EBF2;   /* internal row dividers — grey08 */

  /* ─── Brand palette · raw, always available ────────────────────────
     Customer scaffold uses --sky only in the "Built with Elements"
     credit; the rest of their site uses --accent (defaults to ink).
     Brand voice aliases --accent to --blue. */

  --blue:        #49A9E7;                 /* primary brand — fills, marks */
  --blue-dark:   #297EC2;                 /* hover, deep accent text */
  --blue-light:  #EBF6FC;                 /* focus wash, callout backgrounds */
  --blue-dot:    rgba(41, 126, 194, 0.30);
  --blue-wash:   rgba(73, 169, 231, 0.08);

  --coral:       #F37865;
  --teal:        #00B893;
  --purple:      #6D71CA;

  /* Legacy alias — older CSS still references --sky directly. */
  --sky:         var(--blue);
  --sky-deep:    var(--blue-dark);
  --sky-soft:    var(--blue-light);
  --sky-dot:     var(--blue-dot);
  --sky-wash:    var(--blue-wash);

  /* ─── Neutral grey scale · explicit ────────────────────────────────
     Numeric suffix = approximate darkness (50 = mid, 08 = barely tinted).
     Same values as the ink ramp, exposed under their palette names so
     CSS can address them directly. */

  --dark:        #102C42;   /* navy ink */
  --grey50:      #6E8499;
  --grey32:      #A0AFBE;
  --grey15:      #C9D2DB;
  --grey08:      #E4EBF2;

  /* ─── 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 → blue */
  --accent-deep:  var(--accent);                 /* follows accent unless overridden */
  --accent-soft:  var(--bg-soft);                /* neutral until overridden */
  --accent-dot:   rgba(16, 44, 66, 0.22);        /* ink-alpha; brand voice → blue-dot */
  --accent-wash:  rgba(16, 44, 66, 0.04);        /* ink-wash; brand voice → blue-wash */

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

  --green:       #5AC558;
  --green-soft:  #ECF8EB;
  --green-dot:   rgba(90, 197, 88, 0.22);

  --yellow:      #F2D64C;
  --yellow-soft: #FEF7DA;

  --red:         #EB5757;
  --red-soft:    #FCEAEA;

  /* Legacy aliases — older CSS still references --amber / --danger. */
  --amber:       #d4a24a;
  --amber-soft:  var(--yellow-soft);
  --danger:      var(--red);
  --danger-soft: var(--red-soft);

  /* ─── Terminal palette ────────────────────────────────────────────
     Dark surface for code-fence + terminal blocks. */

  --term-bg:      #102C42;   /* navy — matches ink */
  --term-ink:     #E4EBF2;
  --term-dim:     #6E8499;
  --term-green:   #5AC558;
  --term-orange:  #F37865;
  --term-amber:   #F2D64C;

  /* ─── Fonts ──────────────────────────────────────────────────────────
     System fonts only at the upstream level — no foundry license
     needed. Sites that want a specific brand face override --font-sans
     / --font-mono in their own app/styles/page.css and self-host the
     woff2s. The elements.dev brand site does this in
     server/app/styles/fonts.css (Colfax + Fira Code). */

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

  --font-ui:       var(--font-sans);   /* chrome — buttons, nav, labels */
  --font-body:     var(--font-sans);
  --font-prose:    var(--font-sans);
  --font-heading:  var(--font-sans);
  --font-code:     var(--font-mono);   /* code blocks, kbd, fenced code */

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

  /* ─── Type scale ─────────────────────────────────────────────────────
     Tuned to the elements.dev brand spec: h1 56 / h2 44 / h3 32, body
     14–24px range. Roles map onto sizes:

       h1            → --text-3xl   (56)
       h2            → --text-2xl   (44)
       h3            → --text-xl    (32)
       body large    → --text-lg    (24)
       body          → --text-md    (18)
       body small    → --text-sm    (14)
       footnote      → --text-xs    (12)
       eyebrow       → --text-2xs   (11)
       display       → --text-4xl   (72) */

  --text-2xs:   0.6875rem;   /* 11   — eyebrows */
  --text-xs:    0.75rem;     /* 12   — footnotes, fineprint */
  --text-sm:    0.875rem;    /* 14   — body small (designer's body14) */
  --text-md:    1.125rem;    /* 18   — body default (designer's body18) */
  --text-lg:    1.5rem;      /* 24   — large body (designer's body24) */
  --text-xl:    2rem;        /* 32   — h3 (designer's h3) */
  --text-2xl:   2.75rem;     /* 44   — h2 (designer's h2) */
  --text-3xl:   3.5rem;      /* 56   — h1 (designer's h1) */
  --text-4xl:   4.5rem;      /* 72   — display splash */
  --text-5xl:   6rem;        /* 96   — oversized hero */

  --leading-none:    1;
  --leading-tight:   1.2;     /* 120% — headings (designer spec) */
  --leading-snug:    1.3;
  --leading-body:    1.4;     /* 140% — body (designer spec) */
  --leading-relaxed: 1.6;

  --tracking-tighter: -0.025em;  /* display headlines */
  --tracking-tight:   -0.015em;  /* H1 */
  --tracking-snug:    -0.01em;   /* H2 */
  --tracking-normal:  0;
  --tracking-wide:     0.04em;
  --tracking-widest:   0.14em;   /* eyebrow labels */

  /* ─── 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;

  --gap-head-sub:   0.75rem;
  --gap-head-body:  1.25rem;
  --gap-section:    2.25rem;

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

  --container-narrow:    440px;
  --container-prose:     680px;
  --container-marketing: 820px;
  --container-shell:     880px;
  --container-wide:     1080px;
  --container-padding:  var(--space-8);

  /* ─── Radii ───────────────────────────────────────────────────────── */

  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   6px;
  --radius-lg:   7px;
  --radius-xl:   10px;
  --radius-2xl:  12px;
  --radius-full: 9999px;

  /* ─── Shadows ─────────────────────────────────────────────────────── */

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

  /* Soft drop shadow used by hover/focus states on inputs and cards —
     tinted with --dark to match the navy ink. */
  --shadow-soft: 0 10px 10px rgba(16, 44, 66, 0.06);

  /* ─── Focus ───────────────────────────────────────────────────────── */

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

  /* ─── 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);

  /* ─── Inputs ──────────────────────────────────────────────────────── */

  --input-height:        2.75rem;    /* 44px */
  --input-height-sm:     2rem;        /* 32px */
  --input-height-lg:     3rem;        /* 48px */
  --input-padding-x:     0.75rem;
  --input-padding-y:     0.625rem;
  --input-radius:        var(--radius-md);
  --input-font-size:     1rem;       /* 16 — iOS-zoom safe baseline */
  --input-bg:            var(--bg);
  --input-border:        var(--grey15);
  --input-border-hover:  var(--grey32);
  --input-border-focus:  var(--blue);
  --input-bg-focus:      var(--blue-light);
  --input-placeholder:   var(--ink-faint);

  /* ─── Buttons ─────────────────────────────────────────────────────── */

  --button-height:       2.75rem;    /* 44px — matches input default */
  --button-height-sm:    2.25rem;    /* 36px */
  --button-height-lg:    3rem;       /* 48px — hero density */
  --button-height-hero:  3.25rem;    /* 52px — install/marketing CTA per spec */
  --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;
  }
}