/* =============================================================================
   NS PRO GROUP — Design Tokens (v2026)
   Three layers: primitive → semantic → component
   Sources: brand (logo #E0182B), ui-ux-pro-max (Bento + Soft UI), design-system,
            apple-design (type/material), emil-design-eng (easing/duration), dataviz
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- PRIMITIVE: color ---------- */
  --red-50:  #FEF2F3;
  --red-100: #FDE3E6;
  --red-200: #FBC5CB;
  --red-300: #F79AA3;
  --red-400: #F04A5A;
  --red-500: #E0182B;   /* brand */
  --red-600: #C41425;
  --red-700: #A3101F;
  --red-800: #7F0D18;
  --red-900: #520910;

  --gray-0:   #FFFFFF;
  --gray-25:  #FCFCFB;
  --gray-50:  #F7F7F8;
  --gray-100: #F0F0F2;
  --gray-200: #E2E3E7;
  --gray-300: #C9CBD2;
  --gray-400: #9EA2AD;
  --gray-500: #6E7385;
  --gray-600: #4F5467;
  --gray-700: #363A4B;
  --gray-800: #23263A;
  --gray-900: #0F172A;
  --gray-950: #080B14;

  /* Kids brand (from NSPro4kids logo) */
  --kids-lime:   #C0D838;
  --kids-orange: #F08020;
  --kids-yellow: #F8D000;
  --kids-blue:   #00A8E8;
  --kids-green:  #00A050;
  --kids-purple: #A04080;

  /* Beauty brand */
  --beauty-rose:  #B76E79;
  --beauty-blush: #F4E3E3;
  --beauty-gold:  #C9A96E;

  /* Status (reserved — never used as series colors) */
  --green-500:  #008300;
  --green-50:   #EAF6EA;
  --amber-500:  #EDA100;
  --amber-50:   #FFF6DF;
  --orange-500: #EB6834;
  --orange-50:  #FDEEE7;

  /* Dataviz categorical (validated, fixed order) */
  --series-1: #E0182B;
  --series-2: #2A78D6;
  --series-3: #1BAF7A;
  --series-4: #EDA100;
  --series-5: #4A3AA7;
  --series-6: #E87BA4;
  --series-7: #008300;

  /* ---------- PRIMITIVE: typography ---------- */
  --font-heading: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   0.8125rem;  /* 13px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --text-4xl:  clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --text-display: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-body: 0;
  --tracking-small: 0.01em;
  --tracking-caps: 0.08em;

  /* ---------- PRIMITIVE: spacing (4px scale) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- PRIMITIVE: radius / shadow ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.05), 0 20px 40px rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 10px 20px rgba(15, 23, 42, 0.08), 0 40px 80px rgba(15, 23, 42, 0.14);
  --shadow-brand: 0 8px 24px rgba(224, 24, 43, 0.28);

  /* ---------- PRIMITIVE: motion (emil-design-eng) ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease: ease;
  --duration-instant: 100ms;
  --duration-fast: 160ms;
  --duration-base: 220ms;
  --duration-slow: 300ms;
  --duration-modal: 260ms;

  /* ---------- SEMANTIC: color ---------- */
  --color-primary: var(--red-500);
  --color-primary-hover: var(--red-600);
  --color-primary-active: var(--red-700);
  --color-primary-soft: var(--red-50);
  --color-primary-soft-2: var(--red-100);
  --color-on-primary: var(--gray-0);

  --color-bg: var(--gray-25);
  --color-bg-alt: var(--gray-50);
  --color-surface: var(--gray-0);
  --color-surface-2: var(--gray-100);
  --color-surface-3: var(--gray-200);
  --color-ink: var(--gray-900);
  --color-ink-2: var(--gray-700);
  --color-muted: var(--gray-500);
  --color-muted-2: var(--gray-400);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-dark: var(--gray-900);
  --color-on-dark: var(--gray-0);
  --color-on-dark-muted: rgba(255, 255, 255, 0.68);

  --color-success: var(--green-500);
  --color-success-soft: var(--green-50);
  --color-warning: var(--amber-500);
  --color-warning-soft: var(--amber-50);
  --color-danger: var(--red-600);
  --color-danger-soft: var(--red-50);
  --color-info: var(--series-2);
  --color-info-soft: #EAF2FC;

  --color-ring: var(--red-500);
  --ring-width: 2px;
  --ring-offset: 2px;

  --color-kids: var(--kids-blue);
  --color-kids-soft: #E6F6FD;
  --color-beauty: var(--beauty-rose);
  --color-beauty-soft: var(--beauty-blush);

  /* ---------- SEMANTIC: material (apple-design) ---------- */
  --material-nav: rgba(255, 255, 255, 0.72);
  --material-nav-blur: blur(20px) saturate(180%);
  --material-scrim: rgba(15, 23, 42, 0.55);

  /* ---------- COMPONENT ---------- */
  --btn-radius: var(--radius-full);
  --btn-height: 48px;
  --btn-height-sm: 40px;
  --btn-px: 1.375rem;
  --btn-bg: var(--color-primary);
  --btn-bg-hover: var(--color-primary-hover);
  --btn-fg: var(--color-on-primary);

  --card-bg: var(--color-surface);
  --card-radius: var(--radius-xl);
  --card-border: 1px solid var(--color-border);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --card-hover-scale: 1.015;

  --input-height: 48px;
  --input-radius: var(--radius-md);
  --input-bg: var(--color-surface);
  --input-border: var(--color-border-strong);
  --input-border-focus: var(--color-primary);

  --nav-height: 76px;
  --container-max: 1240px;
  --container-px: 1rem;
  --grid-gap: 1.25rem;
}

/* Dark mode — selected values, not an automatic flip (admin & LMS may use data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-theme-auto="true"] {
    color-scheme: dark;
    --color-bg: #0F1117;
    --color-bg-alt: #141722;
    --color-surface: #1A1D29;
    --color-surface-2: #23273A;
    --color-surface-3: #2E3247;
    --color-ink: #F5F6F8;
    --color-ink-2: #D5D8E0;
    --color-muted: #9EA2AD;
    --color-muted-2: #6E7385;
    --color-border: #2B2F42;
    --color-border-strong: #3A3F57;
    --color-primary: var(--red-400);
    --color-primary-hover: var(--red-300);
    --color-primary-active: var(--red-500);
    --color-primary-soft: rgba(240, 74, 90, 0.12);
    --color-primary-soft-2: rgba(240, 74, 90, 0.2);
    --material-nav: rgba(15, 17, 23, 0.72);
    --series-1: #F04A5A; --series-2: #3987E5; --series-3: #199E70; --series-4: #C98500;
    --series-5: #9085E9; --series-6: #D55181; --series-7: #2E9E2E;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0F1117;
  --color-bg-alt: #141722;
  --color-surface: #1A1D29;
  --color-surface-2: #23273A;
  --color-surface-3: #2E3247;
  --color-ink: #F5F6F8;
  --color-ink-2: #D5D8E0;
  --color-muted: #9EA2AD;
  --color-muted-2: #6E7385;
  --color-border: #2B2F42;
  --color-border-strong: #3A3F57;
  --color-primary: var(--red-400);
  --color-primary-hover: var(--red-300);
  --color-primary-active: var(--red-500);
  --color-primary-soft: rgba(240, 74, 90, 0.12);
  --color-primary-soft-2: rgba(240, 74, 90, 0.2);
  --material-nav: rgba(15, 17, 23, 0.72);
  --series-1: #F04A5A; --series-2: #3987E5; --series-3: #199E70; --series-4: #C98500;
  --series-5: #9085E9; --series-6: #D55181; --series-7: #2E9E2E;
}

/* Reduced transparency / contrast (apple-design §14) */
@media (prefers-reduced-transparency: reduce) {
  :root { --material-nav: var(--color-surface); --material-nav-blur: none; }
}
@media (prefers-contrast: more) {
  :root { --color-border: var(--gray-400); --color-border-strong: var(--gray-500); --card-border: 1px solid var(--gray-500); }
}