/* ============================================================
   AITYKE DESIGN SYSTEM v2026-04-19 — DESIGN TOKENS
   Verbatim port of the :root block from
   plugins/aityke-frontend/template/template-20260419.html
   ============================================================ */

/* Amazon Ember self-hosted fallback — drop font files into assets/fonts/ for production */
@font-face { font-family: 'Amazon Ember'; font-weight: 300; font-style: normal; src: local('Amazon Ember Light'); }
@font-face { font-family: 'Amazon Ember'; font-weight: 400; font-style: normal; src: local('Amazon Ember'); }
@font-face { font-family: 'Amazon Ember'; font-weight: 500; font-style: normal; src: local('Amazon Ember Medium'); }
@font-face { font-family: 'Amazon Ember'; font-weight: 700; font-style: normal; src: local('Amazon Ember Bold'); }
@font-face { font-family: 'Amazon Ember'; font-weight: 800; font-style: normal; src: local('Amazon Ember Heavy'); }

:root {
    /* ── Brand Orange (Primary) ─────────────────────────────── */
    --orange-50:   #fef8f4;
    --orange-100:  #fdeee3;
    --orange-200:  #f9d4b8;
    --orange-300:  #f3b68a;
    --orange-400:  #e5a07a;
    --orange-500:  #d4845a;   /* AITYKE Primary */
    --orange-600:  #c06b3e;
    --orange-700:  #a85a2e;
    --orange-800:  #7d3f1e;
    --orange-900:  #4e260e;

    /* ── Gold / Accent ─────────────────────────────────────── */
    --gold-300:    #dec49e;
    --gold-400:    #c9a87c;
    --gold-500:    #b08a58;
    --gold-600:    #8f6d3a;

    /* ── Dark / Secondary ──────────────────────────────────── */
    --dark-100:    #f5f5f5;
    --dark-200:    #e0e0e0;
    --dark-300:    #b0b0b0;
    --dark-400:    #808080;
    --dark-500:    #4a4a4a;
    --dark-550:    #555555;   /* AITYKE header bar */
    --dark-600:    #2d2d2d;   /* AITYKE Secondary */
    --dark-700:    #1e1e1e;
    --dark-800:    #121212;
    --dark-900:    #0a0a0a;

    /* ── Slate Neutrals ────────────────────────────────────── */
    --slate-50:    #f8fafc;
    --slate-100:   #f1f5f9;
    --slate-200:   #e2e8f0;
    --slate-300:   #cbd5e1;
    --slate-400:   #94a3b8;
    --slate-500:   #64748b;
    --slate-600:   #475569;
    --slate-700:   #334155;
    --slate-800:   #1e293b;
    --slate-900:   #0f172a;

    /* ── Status ────────────────────────────────────────────── */
    --green-50:  #f0fdf4; --green-500: #22c55e; --green-600: #16a34a; --green-700: #15803d;
    --amber-50:  #fffbeb; --amber-500: #f59e0b; --amber-600: #d97706;
    --red-50:    #fef2f2; --red-500:   #ef4444; --red-600:   #dc2626; --red-700:  #b91c1c;
    --purple-50: #faf5ff; --purple-500:#a855f7; --purple-600:#9333ea; --purple-700:#7e22ce;
    --blue-50:   #eff6ff; --blue-500:  #3b82f6; --blue-600:  #2563eb;
    --cyan-50:   #ecfeff; --cyan-500:  #06b6d4;
    --rose-50:   #fff1f2; --rose-500:  #f43f5e; --rose-600:  #e11d48;

    /* ── Semantic Surfaces ─────────────────────────────────── */
    --color-bg:           #f8f6f3;
    --surface-sunken:     #f1ede7;
    --surface-1:          #ffffff;
    --surface-2:          #fbf8f4;
    --surface-3:          #f5f0ea;
    --surface-raised:     #ffffff;
    --surface-overlay:    rgba(45,45,45,0.55);

    /* ── Borders ───────────────────────────────────────────── */
    --color-border:       #e8e0d8;
    --border-light:       #f1ece5;
    --border-strong:      #d4cabd;

    /* ── Text ──────────────────────────────────────────────── */
    --color-text:         #2d2d2d;
    --color-text-2:       #475569;
    --color-muted:        #64748b;
    --color-subtle:       #94a3b8;
    --color-inverse:      #ffffff;

    /* ── Brand Aliases ─────────────────────────────────────── */
    --color-primary:      #d4845a;
    --color-primary-hover:#c06b3e;
    --color-primary-soft: #fdeee3;
    --color-accent:       #c9a87c;
    --color-dark:         #2d2d2d;

    /* ── Focus / Ring ──────────────────────────────────────── */
    --ring-primary:       0 0 0 3px rgba(212,132,90,0.35);
    --ring-danger:        0 0 0 3px rgba(220,38,38,0.30);
    --ring-success:       0 0 0 3px rgba(22,163,74,0.30);
    --ring-neutral:       0 0 0 3px rgba(100,116,139,0.25);
    --focus-outline:      2px solid var(--orange-500);
    --focus-offset:       2px;

    /* ── Elevation ─────────────────────────────────────────── */
    --elev-1: 0 1px 2px rgba(42,22,10,0.05);
    --elev-2: 0 1px 3px rgba(42,22,10,0.08), 0 1px 2px rgba(42,22,10,0.04);
    --elev-3: 0 4px 12px rgba(42,22,10,0.10), 0 2px 4px rgba(42,22,10,0.05);
    --elev-4: 0 8px 24px rgba(42,22,10,0.12), 0 4px 8px rgba(42,22,10,0.06);
    --elev-5: 0 16px 48px rgba(42,22,10,0.15);
    --shadow-xs: var(--elev-1);
    --shadow-sm: var(--elev-2);
    --shadow-md: var(--elev-3);
    --shadow-lg: var(--elev-4);
    --shadow-xl: var(--elev-5);
    --shadow-orange:    0 4px 16px rgba(212,132,90,0.30);
    --shadow-orange-lg: 0 8px 32px rgba(212,132,90,0.35);

    /* ── Radius ────────────────────────────────────────────── */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-full: 9999px;

    /* ── Spacing scale (4-pt grid) ─────────────────────────── */
    --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;
    --sp-12:48px;  --sp-16:64px;

    /* ── Font ──────────────────────────────────────────────── */
    --font-sans: 'Amazon Ember', 'Nunito', 'Nunito Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ── Fluid Type Scale ──────────────────────────────────── */
    --type-display: clamp(36px, 4.2vw + 16px, 56px);
    --type-h1:      clamp(28px, 2.6vw + 14px, 38px);
    --type-h2:      clamp(22px, 1.6vw + 12px, 28px);
    --type-h3:      clamp(17px, 0.8vw + 12px, 20px);
    --type-h4:      15px;
    --type-body-lg: 17px;
    --type-body:    14px;
    --type-body-sm: 13px;
    --type-caption: 11px;

    /* ── Motion ────────────────────────────────────────────── */
    --ease-standard:    cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized:  cubic-bezier(0.3, 0, 0, 1);
    --ease-decelerated: cubic-bezier(0, 0, 0, 1);
    --ease-accelerated: cubic-bezier(0.3, 0, 1, 1);
    --t-fast: 120ms var(--ease-standard);
    --t-base: 180ms var(--ease-standard);
    --t-slow: 280ms var(--ease-emphasized);

    /* ── Chart palette (orange-first) ──────────────────────── */
    --chart-1:    #d4845a;
    --chart-2:    #c06b3e;
    --chart-3:    #c9a87c;
    --chart-4:    #f3b68a;
    --chart-5:    #7d3f1e;
    --chart-line: #a85a2e;
    --chart-fill: rgba(212,132,90,0.18);
    --chart-grid: #e8e0d8;
    --chart-axis: #94a3b8;

    /* ── Header bar ────────────────────────────────────────── */
    --header-bg:  var(--dark-550);
    --header-fg:  #ffffff;

    /* ── Z-index scale ─────────────────────────────────────── */
    --z-sticky:    50;
    --z-header:    100;
    --z-drawer:    900;
    --z-overlay:   1000;
    --z-modal:     1100;
    --z-toast:     1200;
    --z-popover:   1300;
}

/* ── Dark Mode ───────────────────────────────────────────── */
[data-theme="dark"] {
    --color-bg:        #1a1714;
    --surface-sunken:  #14110e;
    --surface-1:       #221d18;
    --surface-2:       #2a241e;
    --surface-3:       #322a23;
    --surface-raised:  #2d2620;
    --surface-overlay: rgba(0,0,0,0.65);

    --color-border:    #3a322a;
    --border-light:    #2d2620;
    --border-strong:   #4a4036;

    --color-text:      #f1ede7;
    --color-text-2:    #cbc4ba;
    --color-muted:     #94a3b8;
    --color-subtle:    #6e6557;
    --color-inverse:   #1a1714;

    --chart-grid:      #3a322a;
    --header-bg:       #14110e;
}

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