/**
 * xwira design tokens — shared DNA across xwira.tech + educative + drive + …
 *
 * Every subdomain app imports this file at the top of its stylesheet
 * (or, for Next.js apps, mirrors these values in its Mantine/Tailwind theme).
 * Apps keep their own layout + product-specific styles; the shared tokens
 * ensure the ecosystem feels like one family without forcing visual sameness.
 *
 * Malaysian heritage colors are the identity anchor. Neutrals adapt for
 * dark mode. Fonts are system sans throughout — no more Charter serif.
 */

:root {
  color-scheme: light dark;

  /* ── Malaysian heritage — the identity ────────────────────────── */
  --xw-red:         #C8102E;
  --xw-red-strong:  #A50D25;
  --xw-red-soft:    #FEEDEF;
  --xw-gold:        #EAB308;
  --xw-gold-soft:   #FEF3C7;
  --xw-navy:        #0F172A;

  /* ── Neutrals (light) ─────────────────────────────────────────── */
  --xw-bg:          #ffffff;
  --xw-bg-muted:    #F8F7F4;         /* the paper warmth without the noise */
  --xw-surface:     #ffffff;
  --xw-surface-alt: #F5F5F4;
  --xw-border:      #E5E7EB;
  --xw-border-strong: #D4D4D8;
  --xw-text:        #0A0A0A;
  --xw-text-soft:   #404040;
  --xw-text-mute:   #737373;
  --xw-shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --xw-shadow-md:   0 4px 12px -4px rgb(0 0 0 / 0.10);
  --xw-shadow-lg:   0 20px 40px -20px rgb(15 23 42 / 0.20);

  /* ── Type scale ───────────────────────────────────────────────── */
  --xw-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --xw-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --xw-text-xs:   0.75rem;    /* 12 */
  --xw-text-sm:   0.875rem;   /* 14 */
  --xw-text-base: 1rem;       /* 16 */
  --xw-text-lg:   1.125rem;   /* 18 */
  --xw-text-xl:   1.5rem;     /* 24 */
  --xw-text-2xl:  2rem;       /* 32 */
  --xw-text-3xl:  clamp(2.5rem, 5vw, 4rem);   /* 40-64 */
  --xw-text-4xl:  clamp(3rem, 7vw, 6rem);     /* 48-96 */

  /* ── Spacing ──────────────────────────────────────────────────── */
  --xw-space-1: 0.25rem;
  --xw-space-2: 0.5rem;
  --xw-space-3: 0.75rem;
  --xw-space-4: 1rem;
  --xw-space-6: 1.5rem;
  --xw-space-8: 2rem;
  --xw-space-12: 3rem;
  --xw-space-16: 4rem;
  --xw-space-24: 6rem;
  --xw-container: 1200px;
  --xw-gutter:    clamp(1.25rem, 4vw, 2.5rem);

  /* ── Radii ────────────────────────────────────────────────────── */
  --xw-radius-sm:  6px;
  --xw-radius:     10px;
  --xw-radius-lg:  16px;
  --xw-radius-xl:  24px;
  --xw-radius-full: 999px;

  /* ── Motion ───────────────────────────────────────────────────── */
  --xw-ease:      cubic-bezier(.4, 0, .2, 1);
  --xw-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --xw-dur-fast:  120ms;
  --xw-dur:       200ms;
  --xw-dur-slow:  400ms;
}

/* ── Dark mode ──────────────────────────────────────────────────── */
[data-theme="dark"] {
  --xw-bg:          #0A0A0A;
  --xw-bg-muted:    #171717;
  --xw-surface:     #171717;
  --xw-surface-alt: #262626;
  --xw-border:      #262626;
  --xw-border-strong: #404040;
  --xw-text:        #FAFAFA;
  --xw-text-soft:   #E5E5E5;
  --xw-text-mute:   #A3A3A3;
  --xw-red-soft:    #2D0910;
  --xw-gold-soft:   #2B2005;
  --xw-shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.4);
  --xw-shadow-md:   0 4px 12px -4px rgb(0 0 0 / 0.5);
  --xw-shadow-lg:   0 20px 40px -20px rgb(0 0 0 / 0.7);
}

/* Respect the OS if the user hasn't overridden via the toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --xw-bg:          #0A0A0A;
    --xw-bg-muted:    #171717;
    --xw-surface:     #171717;
    --xw-surface-alt: #262626;
    --xw-border:      #262626;
    --xw-border-strong: #404040;
    --xw-text:        #FAFAFA;
    --xw-text-soft:   #E5E5E5;
    --xw-text-mute:   #A3A3A3;
    --xw-red-soft:    #2D0910;
    --xw-gold-soft:   #2B2005;
    --xw-shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.4);
    --xw-shadow-md:   0 4px 12px -4px rgb(0 0 0 / 0.5);
    --xw-shadow-lg:   0 20px 40px -20px rgb(0 0 0 / 0.7);
  }
}