/* Design tokens — the single source of truth for colour, type, spacing and elevation.
 *
 * Follows docs/specs/Especifiaciones de diseño.md: no pure neutrals, shadows carry the
 * brand's temperature, interactive states tint towards the brand, text lives in three
 * levels. The brand hues are the approved corporate ones (terracotta shell, turquoise
 * accent), not that document's sample "Warm" palette.
 *
 * Components live in theme.css and must reference these variables only — rule 2 of the
 * spec: never hardcode a colour in a component.
 */

/* --- Typefaces (self-hosted, no CDN) ------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces.woff2') format('woff2-variations');
  font-weight: 200 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Chivo Mono';
  src: url('../fonts/chivo-mono.woff2') format('woff2-variations');
  font-weight: 300 500;
  font-display: swap;
  font-style: normal;
}

/* --- Theme-independent tokens -------------------------------------------- */

:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Instrument Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Chivo Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Type scale. The spec's 3rem hero belongs to an editorial page; a work surface
     that must show case, reservation and actions at once uses a tighter top end. */
  --text-h1: 1.75rem;
  --text-h2: 1.35rem;
  --text-h3: 1.05rem;
  --text-body: 0.9375rem;
  --text-sm: 0.8125rem;
  --text-xs: 0.75rem;
  --text-label: 0.6875rem;

  --leading-tight: 1.15;
  --leading-normal: 1.55;
  --leading-loose: 1.7;
  --tracking-tight: -0.02em;
  --tracking-label: 0.11em;

  /* 4px rhythm. */
  --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;
  /* Reading views breathe at the spec's 88px; dense work views would need a scrollbar
     to fit a single screen, so they use --space-section-dense. */
  --space-section: 5.5rem;
  --space-section-dense: 2rem;

  --radius-panel: 12px;
  --radius-card: 10px;
  --radius-control: 0.25rem;
  --radius-badge: 4px;
  --radius-pill: 999px;

  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;
}

/* --- Light: the approved corporate palette ------------------------------- */

:root,
:root[data-theme='light'] {
  color-scheme: light;

  --color-bg: #f0f0eb;
  --color-surface: #fbf8f2;
  --color-surface-2: #efe6d8;
  --color-surface-3: #e6dac7;
  --color-border: #e3d3be;
  --color-border-strong: #c89b87;
  --color-text: #2a2117;
  --color-text-2: #5c4e3f;
  --color-text-muted: #8c7b68;
  --color-brand: #00acd8;
  --color-brand-hover: #0294bb;
  --color-brand-subtle: #e1f5fa;
  --color-brand-text: #05687f;
  --color-accent: #c89b87; /* terracotta: shell, avatars, emphasis borders */
  --color-on-brand: #ffffff;
  --color-selection-bg: #0284a5;
  --color-selection-text: #ffffff;

  /* Semantic families. The design document stops at the brand, which is why every
     badge in the app looked identical; these are tinted, never pure. */
  --color-success: #2f7d5b;
  --color-success-subtle: #e4f2ea;
  --color-success-border: #a8cfbb;
  --color-success-text: #1f5a41;

  --color-warning: #b87514;
  --color-warning-subtle: #fbeedc;
  --color-warning-border: #e5c48f;
  --color-warning-text: #7a4d08;

  --color-danger: #b3372b;
  --color-danger-subtle: #f9e5e2;
  --color-danger-border: #e5afa8;
  --color-danger-text: #7c2119;

  --color-info: #00acd8;
  --color-info-subtle: #e1f5fa;
  --color-info-border: #9fd9e8;
  --color-info-text: #05687f;

  --color-neutral: #8c7b68;
  --color-neutral-subtle: #efe6d8;
  --color-neutral-border: #e3d3be;
  --color-neutral-text: #5c4e3f;

  /* Shadows carry the brand's warmth — never rgba(0,0,0,x) in a light theme. */
  --shadow-sm: 0 1px 3px rgba(120, 90, 60, 0.1), 0 0 0 1px rgba(120, 90, 60, 0.04);
  --shadow-md: 0 4px 16px rgba(120, 90, 60, 0.12), 0 1px 4px rgba(120, 90, 60, 0.06);
  --shadow-lg: 0 12px 40px rgba(120, 90, 60, 0.14), 0 2px 8px rgba(120, 90, 60, 0.07);
  --shadow-focus: 0 0 0 3px rgba(0, 172, 216, 0.22);

  /* Categorical series, assigned in this fixed order and never cycled.
     Validated with the dataviz palette checker (light mode, surface #fcfcfb):
     lightness band, chroma floor, CVD separation (worst adjacent ΔE 9.3 protan) and
     normal-vision floor all pass. --chart-1 and --chart-5 sit below 3:1 against the
     surface, which is why every chart carries visible value labels or a legend. */
  --chart-1: #00acd8;
  --chart-2: #e2662a;
  --chart-3: #8a5cf6;
  --chart-4: #1f9e5f;
  --chart-5: #e8a33d;
  --chart-6: #2f6fd0;
  --chart-grid: #e3d3be;
  --chart-axis: #8c7b68;
}

/* --- Dark: derived with the same method, not inverted -------------------- */

:root[data-theme='dark'] {
  color-scheme: dark;

  --color-bg: #14120f;
  --color-surface: #1c1916;
  --color-surface-2: #262119;
  --color-surface-3: #322a21;
  --color-border: #332b22;
  --color-border-strong: #574636;
  --color-text: #f2ebe1;
  --color-text-2: #bcac97;
  --color-text-muted: #8a7a67;
  --color-brand: #35c6eb;
  --color-brand-hover: #5ad3f2;
  --color-brand-subtle: #0e3542;
  --color-brand-text: #7fdcf3;
  --color-accent: #d8a893;
  --color-on-brand: #06222b;
  --color-selection-bg: #35c6eb;
  --color-selection-text: #06222b;

  --color-success: #4cb887;
  --color-success-subtle: #123528;
  --color-success-border: #1f5a41;
  --color-success-text: #7fd6ae;

  --color-warning: #e0a13c;
  --color-warning-subtle: #3a2a10;
  --color-warning-border: #6b4c14;
  --color-warning-text: #f0c684;

  --color-danger: #e4695b;
  --color-danger-subtle: #3d1a16;
  --color-danger-border: #6e2a22;
  --color-danger-text: #f3a49a;

  --color-info: #35c6eb;
  --color-info-subtle: #0e3542;
  --color-info-border: #1c5a6d;
  --color-info-text: #7fdcf3;

  --color-neutral: #8a7a67;
  --color-neutral-subtle: #262119;
  --color-neutral-border: #332b22;
  --color-neutral-text: #bcac97;

  /* In the dark theme shadows become a brand-tinted glow: pure black reads as a hole. */
  --shadow-sm: 0 0 0 1px rgba(53, 198, 235, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(53, 198, 235, 0.07);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(53, 198, 235, 0.09);
  --shadow-focus: 0 0 0 3px rgba(53, 198, 235, 0.3);

  /* Chosen for the dark surface, not flipped from light: same hue order, re-stepped
     until it clears the dark lightness band (L 0.48–0.67) and the CVD floor against
     surface #1c1916. Worst adjacent pair ΔE 8.8 (protan). */
  --chart-1: #0b8aaa;
  --chart-2: #b15529;
  --chart-3: #7351c3;
  --chart-4: #1f7c4e;
  --chart-5: #b88539;
  --chart-6: #2d5ca4;
  --chart-grid: #332b22;
  --chart-axis: #8a7a67;
}