/* ============================================================
   6thloom design system — tokens
   Source: "6thloom Design System" canvas (Edition 01).
   Layer 1 primitives → Layer 2 semantic → Layer 3 component tokens.
   Ratio 60 cream / 30 brown / 10 red. Red stays scarce: CTAs and badges.
   Loaded on storefront pages before luxe.css (see partials/head.ejs).
   ============================================================ */

/* ---------- Layer 1: primitives (never used directly in components) ---------- */
:root {
  /* core three */
  --loom-red: #C61A1A;          /* 5.6:1 on white */
  --loom-red-700: #A31414;
  --loom-red-08: #FBEAEA;       /* error fill */
  --weave-brown: #561E14;       /* 13.6:1 on cream */
  --weave-brown-900: #3F150E;
  --brown-70: #7A4E44;          /* muted text, 6.6:1 on cream */
  --kasavu-cream: #FEFDF9;
  /* support three */
  --kasavu-gold: #C99B3F;       /* brown text on gold only */
  --leaf-green: #3E6B57;        /* cream text 5.9:1 */
  --sand-100: #F3E7D3;              /* fills, never text */
  --sand-80: #E9DCC6;           /* borders */
  --sand-60: #DCCBB0;
  --white: #FFFFFF;

  /* type families */
  --ff-display: 'Poppins', 'Inter', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ff-malayalam: 'Manjari', 'Noto Sans Malayalam', sans-serif;

  /* type scale (DS: micro 11 · body 14–16 · H3 18 · H2 20–28 · H1 32–48) */
  --text-2xs: 0.6875rem;  /* 11 micro-label */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13 */
  --text-base: 0.875rem;  /* 14 */
  --text-md: 1rem;        /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.25rem;     /* 20 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: 2rem;       /* 32 */
  --text-4xl: 2.5rem;     /* 40 */
  --text-5xl: 3rem;       /* 48 */

  /* spacing: 4px base, layout on the 8px grid */
  --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; --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;

  /* radii: 8 controls · 12 cards · pill badges */
  --radius-none: 0; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px;

  /* elevation, brown-tinted and subtle */
  --shadow-xs: 0 1px 2px rgb(86 30 20 / 0.05);
  --shadow-sm: 0 1px 2px rgb(86 30 20 / 0.06), 0 1px 3px rgb(86 30 20 / 0.08);
  --shadow-md: 0 2px 4px rgb(86 30 20 / 0.06), 0 4px 12px rgb(86 30 20 / 0.10);
  --shadow-lg: 0 4px 8px rgb(86 30 20 / 0.06), 0 12px 32px rgb(86 30 20 / 0.14);
  --shadow-xl: 0 8px 16px rgb(86 30 20 / 0.08), 0 20px 48px rgb(86 30 20 / 0.16);

  /* motion */
  --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 300ms; --duration-slower: 500ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Layer 2: semantic (what themes remap) ---------- */
:root {
  --bg-primary: var(--kasavu-cream);     /* page ground */
  --bg-secondary: var(--white);          /* cards */
  --bg-tertiary: var(--sand-100);            /* fills, placeholders */
  --bg-inverse: var(--weave-brown);

  --text-primary: var(--weave-brown);
  --text-secondary: var(--brown-70);
  --text-inverse: var(--kasavu-cream);
  --text-brand: var(--loom-red);

  --border-default: var(--sand-80);
  --border-subtle: var(--sand-100);
  --border-strong: var(--weave-brown);

  --interactive-primary: var(--loom-red);
  --interactive-primary-hover: var(--loom-red-700);
  --interactive-primary-active: #8A1010;
  --interactive-secondary: var(--weave-brown);
  --interactive-secondary-hover: var(--weave-brown-900);
  --interactive-disabled: var(--sand-80);

  --color-primary: var(--loom-red);
  --color-secondary: var(--weave-brown);
  --color-accent: var(--kasavu-gold);
  --color-success: var(--leaf-green);
  --color-warning: var(--kasavu-gold);
  --color-error: var(--loom-red);
  --color-error-bg: var(--loom-red-08);
  --focus-ring: var(--loom-red);

  --gap-xs: var(--space-1); --gap-sm: var(--space-2); --gap-md: var(--space-4);
  --gap-lg: var(--space-6); --gap-xl: var(--space-8); --gap-section: var(--space-16);

  --radius-button: var(--radius-md);
  --radius-input: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-badge: var(--radius-full);
  --radius-modal: var(--radius-xl);

  --transition-colors: color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-shadow: box-shadow var(--duration-normal) var(--ease-out);
  --transition-opacity: opacity var(--duration-normal) var(--ease-out);
}

@media (prefers-contrast: more) {
  :root { --text-secondary: var(--text-primary); --border-default: var(--weave-brown); }
}

@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;
  }
}