/* ==========================================================================
   Arteria — Design Tokens
   Direction: "Almagre & Madrid Sky" — pigments and light of Madrid itself,
   not the art-app reflex of black-and-gold or gallery-cream.

   Scene: a visitor on Calle del Mesón de Paredes at 6pm in June, low hard
   sun off ochre facades, phone held up one-handed at a mural. Continental
   light — sharp, black-shadowed, high contrast.

   Two themes, structurally, not as a hedge:
   - App (.theme-app)   → dark. It's a viewfinder and a gallery wall.
   - Admin (.theme-admin) → light. It's an office, fluorescent light, tables.
   All values OKLCH.
   ========================================================================== */

@font-face { font-family:'Newsreader'; font-weight:400; font-style:normal; src:url('../fonts/Newsreader-Regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Newsreader'; font-weight:500; font-style:normal; src:url('../fonts/Newsreader-Medium.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Newsreader'; font-weight:600; font-style:normal; src:url('../fonts/Newsreader-SemiBold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Newsreader'; font-weight:700; font-style:normal; src:url('../fonts/Newsreader-Bold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Newsreader'; font-weight:400; font-style:italic; src:url('../fonts/Newsreader-Italic.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Instrument Sans'; font-weight:400; font-style:normal; src:url('../fonts/InstrumentSans-Regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Instrument Sans'; font-weight:500; font-style:normal; src:url('../fonts/InstrumentSans-Medium.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Instrument Sans'; font-weight:600; font-style:normal; src:url('../fonts/InstrumentSans-SemiBold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Instrument Sans'; font-weight:700; font-style:normal; src:url('../fonts/InstrumentSans-Bold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; font-weight:400; font-style:normal; src:url('../fonts/PlexMono-Regular.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; font-weight:500; font-style:normal; src:url('../fonts/PlexMono-Medium.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; font-weight:600; font-style:normal; src:url('../fonts/PlexMono-SemiBold.woff2') format('woff2'); font-display:swap; }

:root {
  /* ---- Type families ---- */
  --font-display: 'Newsreader', ui-serif, Georgia, serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Brand: Almagre (iron-oxide earth red) ---- */
  --almagre-40: oklch(0.360 0.130 32);
  --almagre-50: oklch(0.505 0.155 32);   /* on-light: clears 4.5:1 with white text */
  --almagre-58: oklch(0.585 0.155 32);   /* on-dark: primary brand */
  --almagre-68: oklch(0.685 0.150 32);
  --almagre-85: oklch(0.900 0.045 32);   /* subtle tint bg */
  --almagre-95: oklch(0.965 0.018 32);

  /* ---- Signal: Cielo (Velázquez cerulean) — live/AR/wayfinding ONLY ---- */
  --cielo-45: oklch(0.450 0.110 232);
  --cielo-60: oklch(0.600 0.135 232);
  --cielo-74: oklch(0.745 0.135 232);
  --cielo-88: oklch(0.900 0.055 232);
  --cielo-95: oklch(0.960 0.022 232);

  /* ---- Semantic (rationed; never almagre) ---- */
  --verde-45:  oklch(0.480 0.120 152);
  --verde-60:  oklch(0.620 0.140 152);
  --verde-92:  oklch(0.940 0.045 152);
  --ambar-55:  oklch(0.680 0.150 78);
  --ambar-92:  oklch(0.945 0.055 78);
  --crimson-50: oklch(0.545 0.200 8);   /* rose-shifted — clear of almagre's hue 32 */
  --crimson-92: oklch(0.950 0.040 8);

  /* ---- Neutrals: warm-shadow ramp (chroma tilted toward almagre hue, not warm-by-default) ---- */
  --ink-0:  oklch(0.145 0.012 32);   /* app canvas / void */
  --ink-1:  oklch(0.195 0.014 32);
  --ink-2:  oklch(0.250 0.015 32);
  --ink-3:  oklch(0.330 0.016 32);
  --ink-4:  oklch(0.440 0.016 32);
  --ink-5:  oklch(0.560 0.014 32);
  --ink-6:  oklch(0.680 0.012 32);
  --ink-7:  oklch(0.800 0.010 32);
  --ink-8:  oklch(0.900 0.008 32);
  --ink-9:  oklch(0.960 0.005 32);
  --ink-10: oklch(0.990 0.002 32);

  /* ---- Admin neutrals: true achromatic (chroma 0) — almagre stays the only warm thing on screen ---- */
  --neu-0:  oklch(1.000 0 0);
  --neu-1:  oklch(0.985 0 0);
  --neu-2:  oklch(0.965 0 0);
  --neu-3:  oklch(0.925 0 0);
  --neu-4:  oklch(0.860 0 0);
  --neu-5:  oklch(0.720 0 0);
  --neu-6:  oklch(0.560 0 0);
  --neu-7:  oklch(0.420 0 0);
  --neu-8:  oklch(0.300 0 0);
  --neu-9:  oklch(0.190 0 0);
  --neu-10: oklch(0.120 0 0);

  /* ---- Radii ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ---- Spacing 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;

  /* ---- Motion ---- */
  --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);
  --dur-press: 140ms;
  --dur-sm: 180ms;
  --dur-md: 240ms;
  --dur-lg: 320ms;
  --dur-ar: 420ms;

  /* ---- Z-index scale ---- */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-tooltip: 60;

  /* ---- Shadows (warm-tinted, not neutral-gray) ---- */
  --shadow-sm: 0 1px 2px oklch(0.10 0.01 32 / 0.30);
  --shadow-md: 0 4px 16px oklch(0.10 0.01 32 / 0.28), 0 1px 3px oklch(0.10 0.01 32 / 0.24);
  --shadow-lg: 0 16px 48px oklch(0.10 0.01 32 / 0.34), 0 4px 12px oklch(0.10 0.01 32 / 0.20);
  --shadow-glow-almagre: 0 0 0 1px oklch(0.585 0.155 32 / 0.4), 0 8px 32px oklch(0.585 0.155 32 / 0.25);
  --shadow-glow-cielo: 0 0 0 1px oklch(0.745 0.135 232 / 0.5), 0 8px 32px oklch(0.745 0.135 232 / 0.3);
}

/* ==========================================================================
   Theme: App (dark) — the viewfinder / gallery wall
   ========================================================================== */
.theme-app {
  --surface: var(--ink-0);
  --surface-2: var(--ink-1);
  --surface-3: var(--ink-2);
  --surface-raised: var(--ink-2);
  --border: var(--ink-3);
  --border-strong: var(--ink-4);
  --text: var(--ink-9);
  --text-secondary: var(--ink-7);
  --text-muted: var(--ink-6);
  --text-faint: var(--ink-4);
  --text-on-brand: oklch(0.99 0.004 32);
  --brand: var(--almagre-58);
  --brand-hover: var(--almagre-68);
  --brand-active: var(--almagre-50);
  --brand-subtle: oklch(0.290 0.060 32);
  --brand-ring: oklch(0.685 0.150 32 / 0.45);
  --live: var(--cielo-74);
  --live-subtle: oklch(0.250 0.060 232);
  --verde: var(--verde-60);
  --verde-subtle: oklch(0.250 0.055 152);
  --ambar: var(--ambar-55);
  --ambar-subtle: oklch(0.270 0.060 78);
  --crimson: var(--crimson-50);
  --crimson-subtle: oklch(0.270 0.070 8);
}

/* ==========================================================================
   Theme: Admin (light) — the office
   ========================================================================== */
.theme-admin {
  --surface: var(--neu-0);
  --surface-2: var(--neu-1);
  --surface-3: var(--neu-2);
  --surface-raised: var(--neu-0);
  --border: var(--neu-3);
  --border-strong: var(--neu-4);
  --text: var(--neu-10);
  --text-secondary: var(--neu-7);
  --text-muted: var(--neu-6);
  --text-faint: var(--neu-5);
  --text-on-brand: oklch(0.99 0.004 32);
  --brand: var(--almagre-50);
  --brand-hover: var(--almagre-40);
  --brand-active: oklch(0.320 0.120 32);
  --brand-subtle: var(--almagre-95);
  --brand-ring: oklch(0.505 0.155 32 / 0.35);
  --live: var(--cielo-45);
  --live-subtle: var(--cielo-95);
  --verde: var(--verde-45);
  --verde-subtle: var(--verde-92);
  --ambar: oklch(0.560 0.140 78);
  --ambar-subtle: var(--ambar-92);
  --crimson: var(--crimson-50);
  --crimson-subtle: var(--crimson-92);
}

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