/*
 * khassinx-tokens.css — Layer 1 (Umbrella) design tokens — Apple-grade canon
 *
 * KhassinX umbrella brand. Apple canonical palette (observed apple.com).
 * NOT for per-app sites (those use their Layer 2 tokens).
 *
 * Source of truth: ~/KhassinX/_template/BRAND_SYSTEM.md §2
 *
 * Pivot 2026-05-25: from charcoal+gold to Apple-grade white minimalism.
 * Why: Apple Editor's Choice + Apple Design Award positioning requires
 * marketing surfaces that match the visual standards of apps Apple features.
 *
 * Auto-switches via prefers-color-scheme. Default LIGHT (Apple-canonical).
 */

:root {
  /* ─── Light theme (default — Apple canon) ─── */

  /* Backgrounds */
  --khassinx-bg: #FFFFFF;                /* Pure white (Apple-canonical) */
  --khassinx-bg-section: #F5F5F7;        /* Apple's exact section gray */
  --khassinx-bg-card: #FBFBFD;           /* Subtle warm white cards */
  --khassinx-bg-elevated: #FFFFFF;       /* Modales sobre section gray */

  /* Text */
  --khassinx-text-primary: #1D1D1F;      /* Apple's exact charcoal (NOT pure black) */
  --khassinx-text-secondary: #6E6E73;    /* Apple's exact secondary */
  --khassinx-text-tertiary: #86868B;     /* Apple's tertiary */
  --khassinx-text-disabled: #C7C7CC;

  /* Accents — Apple system blue, restraint */
  --khassinx-accent: #0066CC;            /* Apple link blue (light) */
  --khassinx-accent-strong: #0040A0;     /* Hover/active */
  --khassinx-accent-soft: #4D94DB;       /* Subtle variant for backgrounds */

  /* Borders — Apple hairline */
  --khassinx-border: #D2D2D7;            /* Apple's exact hairline */
  --khassinx-border-strong: #86868B;     /* Emphasis */

  /* Status — Apple system colors */
  --khassinx-success: #34C759;           /* Apple system green */
  --khassinx-warning: #FF9500;           /* Apple system orange */
  --khassinx-danger: #FF3B30;            /* Apple system red */

  /* Spacing scale — 8-baseline, Apple-grade generous */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;        /* Apple section min */
  --space-6xl: 128px;       /* Apple section default */
  --space-7xl: 160px;       /* Apple section emphasis */
  --space-8xl: 200px;       /* Apple hero max */

  /* Container max-widths — Apple-canonical 980px */
  --container-narrow: 640px;
  --container-default: 980px;       /* Apple uses this */
  --container-wide: 1280px;

  /* Border radius — Apple's preferred soft corners */
  --radius-s: 6px;
  --radius-m: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;        /* Apple cards use ~18px radius */
  --radius-xl: 22px;        /* Apple product cards */
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Typography — Apple canonical */
  --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;

  --fs-display-xl: 80px;
  --fs-display-l: 56px;
  --fs-display-m: 40px;
  --fs-h1: 32px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-body-l: 21px;
  --fs-body: 17px;          /* Apple's preferred body */
  --fs-small: 14px;
  --fs-caption: 12px;

  /* Transitions */
  --transition-fast: 120ms cubic-bezier(0.32, 0, 0.67, 0);
  --transition-base: 200ms cubic-bezier(0.32, 0, 0.67, 0);
  --transition-slow: 320ms cubic-bezier(0.32, 0, 0.67, 0);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ─── Dark theme — Apple OLED-optimized ─── */

    --khassinx-bg: #000000;                /* Pure black (OLED) */
    --khassinx-bg-section: #1D1D1F;        /* Apple section dark */
    --khassinx-bg-card: #1D1D1F;           /* Cards same as section default */
    --khassinx-bg-elevated: #2C2C2E;       /* Elevated modales */

    --khassinx-text-primary: #F5F5F7;      /* Apple dark mode white */
    --khassinx-text-secondary: #A1A1A6;
    --khassinx-text-tertiary: #8E8E93;
    --khassinx-text-disabled: #48484A;

    --khassinx-accent: #2997FF;            /* Apple system blue dark */
    --khassinx-accent-strong: #5AC8FA;
    --khassinx-accent-soft: #1A6DCC;

    --khassinx-border: #38383A;            /* Apple dark hairline */
    --khassinx-border-strong: #48484A;

    --khassinx-success: #30D158;
    --khassinx-warning: #FF9F0A;
    --khassinx-danger: #FF453A;
  }
}

/* Respect prefers-reduced-motion (universal a11y) */
@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;
  }
}