/* ============================================================
   tokens.css — Esko.ai Design Tokens
   Atomic Design: Atoms → Tokens

   Imports primitives.css for raw Figma values.
   This file contains ONLY semantic aliases — no raw hex values.
   ============================================================ */

@import './primitives.css';

:root {

  /* ── Color Palette ──────────────────────────────────────────
     Named slots mapped to Figma primitives.
     Components and sections reference these; never primitives directly.
     ────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --color-bg:           var(--color-space-1);                    /* #F9FAFB — page canvas         */
  --color-bg-nav:       rgb(var(--color-white-rgb) / 0.92);      /* frosted white nav             */
  --color-surface:      var(--color-white);                      /* #FFFFFF — card / modal        */
  --color-surface-2:    var(--color-space-2);                    /* #F3F6F7 — recessed surface    */

  /* Borders */
  --color-border:       rgb(var(--color-ink-rgb) / 0.10);        /* subtle rule                   */
  --color-border-hover: rgb(var(--color-ink-rgb) / 0.25);        /* hover / focus rule            */

  /* Brand accent (primary orange — kept under "teal" alias for CSS compatibility) */
  --color-teal:         var(--color-primary-default);            /* #FF8900 — brand orange        */
  --color-teal-dim:     var(--color-primary-lighter);            /* #FFF9F2 — tint bg             */
  --color-teal-mid:     rgb(var(--color-primary-rgb) / 0.25);    /* brand border / separator      */
  --color-teal-glow:    rgb(var(--color-primary-rgb) / 0.08);    /* brand glow                    */

  /* Text
     NOTE: --color-white is the "primary text" slot — it holds ink/default in light mode.
     Actual white (#FFFFFF) is available as the primitive var(--color-white) from primitives.css.  */
  --color-white:        var(--color-ink-default);                /* #112539 — primary text        */
  --color-muted:        var(--color-ink-lighter);                /* #60717F — secondary text      */
  --color-muted-2:      rgb(var(--color-ink-rgb) / 0.50);        /* tertiary text                 */
  --color-muted-3:      rgb(var(--color-ink-rgb) / 0.30);        /* placeholder / disabled        */
  --color-on-brand:     var(--color-ink-default);               /* text on brand-colored bg      */


  /* ── Semantic Aliases ───────────────────────────────────────
     One-word handles consumed by base.css, components.css, sections.css.
     Rename the primitive mapping above; never change these aliases.
     ────────────────────────────────────────────────────────── */

  --bg:           var(--color-bg);
  --surface:      var(--color-surface);
  --border:       var(--color-border);
  --teal:         var(--color-teal);
  --teal-dim:     var(--color-teal-dim);
  --white:        var(--color-white);
  --muted:        var(--color-muted);
  --on-brand:     var(--color-on-brand);    /* text placed on brand-colored backgrounds */


  /* ── Typography ─────────────────────────────────────────────*/

  --font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "SF Mono", "Fira Code", Consolas, monospace;

  /* Type Scale */
  --text-xs:    0.7rem;   /* 11.2px */
  --text-sm:    0.8rem;   /* 12.8px */
  --text-base:  0.9rem;   /* 14.4px */
  --text-md:    1rem;     /* 16px */
  --text-lg:    1.125rem; /* 18px */
  --text-xl:    1.25rem;  /* 20px */
  --text-2xl:   1.5rem;   /* 24px */
  --text-3xl:   2rem;     /* 32px */
  --text-4xl:   clamp(2rem, 5vw, 3.5rem);
  --text-hero:  clamp(2.25rem, 5.5vw, 3.75rem);


  /* ── Spacing ─────────────────────────────────────────────── */

  --space-1:   0.25rem;  /* 4px */
  --space-2:   0.5rem;   /* 8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */


  /* ── Border Radius ───────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;


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

  --shadow-card: 0 1px 3px rgb(var(--color-ink-rgb) / 0.08),
                 0 0 0 1px var(--color-border);
  --shadow-glow: 0 0 24px var(--color-teal-glow);


  /* ── Transitions ─────────────────────────────────────────── */

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;


  /* ── Layout ──────────────────────────────────────────────── */

  --nav-height:    64px;
  --max-width:     1100px;
  --max-width-sm:  760px;
  --max-width-xs:  620px;
  --section-py:    var(--space-24);
  --section-px:    var(--space-6);

}