/*
 * Vidal & Caraballo design tokens.
 * Three layers: primitive (raw values) → semantic (purpose) → component (per component).
 * Components in style.css reference semantic or component tokens only, never primitives or raw values.
 * To re-theme the site, change the primitive palette; to restyle one role, change a semantic token.
 */

/* Headline face: Cormorant Garamond 500 (SIL OFL, assets/fonts/OFL.txt), Latin subset incl. Spanish accents. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-500-italic.woff2") format("woff2"); }

:root {
  /* ===================== 1. PRIMITIVES ===================== */

  /* Pine (brand green, Utuado mountains) */
  --pine-50:  #f7f4ee;
  --pine-100: #e3e8df;
  --pine-200: #d5e2dc;
  --pine-300: #c2d5cd;
  --pine-400: #afc3ba;
  --pine-500: #8da89d;
  --pine-550: #7f978d;
  --pine-600: #3d7466;
  --pine-900: #1f3d37;
  --pine-950: #152b27;
  --pine-975: #0f201c;  /* near-black pine for dark tiles */

  /* Sand and paper (warm neutrals) */
  --sand-200: #ece5d9;
  --paper-50: #fffdf9;
  --cream-50: #fbf7f0;
  --white:    #ffffff;

  /* Clay (single action accent) */
  --clay-100: #f2e2d6;
  --clay-300: #e9b597;
  --clay-500: #b65a34;
  --clay-700: #9b4a29;

  /* Ink */
  --ink-900: #1c2622;
  --ink-600: #59635e;

  /* Status */
  --green-300: #7cc79a;
  --green-600: #3f8a5c;
  --amber-300: #e0a36e;
  --gold-500:  #c9962b;
  --red-50:    #f6e1da;
  --red-600:   #b4472f;
  --red-800:   #8f3420;

  /* Alpha primitives (pine / clay / white at fixed opacities) */
  --pine-a12: rgba(31, 61, 55, .12);
  --pine-a22: rgba(31, 61, 55, .22);
  --jade-a16: rgba(61, 116, 102, .16);
  --jade-a55: rgba(61, 116, 102, .55);
  --deep-a28: rgba(21, 43, 39, .28);
  --deep-a55: rgba(21, 43, 39, .55);
  --deep-a95: rgba(21, 43, 39, .95);
  --shadow-a22: rgba(31, 45, 38, .22);
  --shadow-a28: rgba(31, 45, 38, .28);
  --shadow-a40: rgba(31, 45, 38, .4);
  --clay-a55: rgba(155, 74, 41, .55);
  --clay-a60: rgba(155, 74, 41, .6);
  --white-a03: rgba(255, 255, 255, .03);
  --white-a07: rgba(255, 255, 255, .07);
  --white-a10: rgba(255, 255, 255, .1);
  --white-a14: rgba(255, 255, 255, .14);
  --white-a70: rgba(255, 255, 255, .7);
  --paper-a88: rgba(247, 244, 238, .88);
  --paper-a90: rgba(255, 253, 249, .9);
  --sand-a50:  rgba(236, 229, 217, .5);
  --green-a20: rgba(124, 199, 154, .2);
  --green-a0:  rgba(124, 199, 154, 0);
  --amber-a20: rgba(224, 163, 110, .2);

  /* Type families */
  /* System stack: SF Pro on Apple devices, Segoe UI on Windows, Roboto on Android. No web-font download. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--font-sans);
  /* Display: classical serif echoing the logo wordmark. Headlines only; UI and body stay in the system sans. */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* Type scale (rem; 1rem = 16px). 10 steps plus fluid display sizes. */
  --fs-3xs: .6875rem;    /* 11 */
  --fs-2xs: .75rem;      /* 12 */
  --fs-xs: .8125rem;     /* 13 */
  --fs-sm: .875rem;      /* 14 */
  --fs-md: .9375rem;     /* 15 */
  --fs-base: 1rem;       /* 16 */
  --fs-body: 1.0625rem;  /* 17 */
  --fs-lg: 1.125rem;     /* 18 */
  --fs-xl: 1.25rem;      /* 20 */
  --fs-2xl: 1.5rem;      /* 24 */
  --fs-3xl: 1.75rem;     /* 28 */
  --fs-lede: clamp(1.0625rem, 1.5vw, 1.21875rem);   /* 17–19.5 */
  --fs-stat: 3.5rem;     /* 56 */
  --fs-score: 4.25rem;   /* 68 */
  --fs-display-sm: clamp(1.5rem, 3vw, 1.875rem);     /* 24–30 */
  --fs-display-md: clamp(1.625rem, 3vw, 2.375rem);   /* 26–38 */
  --fs-display-lg: clamp(2rem, 4.2vw, 3.125rem);     /* 32–50 */
  --fs-display-xl: clamp(2.25rem, 5vw, 3.75rem);     /* 36–60 */
  --fs-display-2xl: clamp(2.625rem, 5.6vw, 4.5rem);  /* 42–72 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-tight: 1.06;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --tracking-tight: -0.025em;
  --tracking-tighter: -0.035em;
  --tracking-caps: .2em;
  --tracking-wordmark: .26em;

  /* Spacing (4px base) */
  --sp-1: .25rem;   /* 4 */
  --sp-2: .5rem;    /* 8 */
  --sp-3: .75rem;   /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.25rem;  /* 20 */
  --sp-6: 1.5rem;   /* 24 */
  --sp-7: 1.75rem;  /* 28 */
  --sp-8: 2rem;     /* 32 */
  --sp-10: 2.5rem;  /* 40 */
  --sp-12: 3rem;    /* 48 */
  --sp-14: 3.5rem;  /* 56 */
  --sp-16: 4rem;    /* 64 */
  --sp-18: 4.5rem;  /* 72 */

  /* Radius */
  --radius-xs: .5rem;     /* 8 */
  --radius-sm: .75rem;    /* 12 */
  --radius-icon: 1rem;    /* 16: icon tiles */
  --radius-md: 1.125rem;  /* 18 */
  --radius-lg: 1.75rem;   /* 28 */
  --radius-xl: 2.25rem;   /* 36: inset panels */
  --radius-arch: 15rem;   /* 240: hero arch */
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Texture */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: .2s;
  --dur-base: .3s;
  --dur-slow: .9s;
  --ease-lux: cubic-bezier(.16, 1, .3, 1);  /* long, soft landing (Apple-style) */

  /* ===================== 2. SEMANTIC ===================== */

  /* Surfaces */
  --color-bg: var(--pine-50);
  --color-surface: var(--paper-50);
  --color-surface-muted: var(--sand-200);
  --color-surface-tint: var(--pine-100);
  --color-surface-inverse: var(--pine-900);
  --color-surface-inverse-deep: var(--pine-950);

  /* Text */
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-600);
  --color-text-brand: var(--pine-900);
  --color-text-accent: var(--pine-600);       /* italic labels, icons on light */
  --color-text-action: var(--clay-700);       /* clay text links: 5.5:1 on bg (AA) */
  --color-text-on-action: var(--white);
  --color-text-inverse: var(--cream-50);      /* headings on pine */
  --color-text-inverse-body: var(--pine-300); /* body on pine */
  --color-text-inverse-muted: var(--pine-400);
  --color-text-inverse-subtle: var(--pine-500);
  --color-text-inverse-faint: var(--pine-550);
  --color-text-inverse-accent: var(--clay-300);
  --color-text-inverse-label: var(--pine-400);

  /* Borders */
  --color-border: var(--pine-a12);
  --color-border-strong: var(--pine-a22);
  --color-border-inverse: var(--white-a14);
  --color-border-inverse-soft: var(--white-a10);

  /* Action (clay) */
  --color-action: var(--clay-500);
  --color-action-hover: var(--clay-700);
  --color-action-soft: var(--clay-100);
  --color-brand: var(--pine-900);
  --color-brand-hover: var(--pine-950);
  --color-brand-secondary: var(--pine-600);

  /* Feedback */
  --color-success: var(--green-600);
  --color-success-bright: var(--green-300);
  --color-warning-bright: var(--amber-300);
  --color-danger: var(--red-600);
  --color-danger-text: var(--red-800);
  --color-danger-soft: var(--red-50);
  --color-rating: var(--gold-500);

  /* Focus, overlays, glass */
  --color-focus: var(--clay-500);
  --color-focus-ring: var(--jade-a16);
  --color-scrim: var(--deep-a55);
  --color-glass: var(--paper-a90);
  --color-glass-edge: var(--white-a70);
  --color-header-glass: var(--paper-a88);

  /* Elevation (pine-tinted, single light source from above) */
  --shadow-sm: 0 6px 18px -8px var(--shadow-a22);
  --shadow-md: 0 24px 60px -18px var(--shadow-a28);
  --shadow-header: 0 10px 30px -22px var(--shadow-a40);
  --shadow-action: 0 12px 26px -10px var(--clay-a55);
  --shadow-action-hover: 0 16px 32px -10px var(--clay-a60);

  /* Layout */
  --gutter: clamp(1rem, 5vw, 4.5rem);
  --content-max: 77.5rem;   /* 1240 */
  --section-y: clamp(5.5rem, 10vw, 8.5rem);
  --tap-min: 2.75rem;       /* 44px minimum touch target */

  /* ===================== 3. COMPONENT ===================== */

  /* Button */
  --button-height: 3.125rem;      /* 50 */
  --button-height-lg: 3.625rem;   /* 58 */
  --button-px: var(--sp-6);
  --button-px-lg: 1.875rem;
  --button-radius: var(--radius-pill);
  --button-font-size: var(--fs-base);
  --button-font-size-lg: var(--fs-body);
  --button-font-weight: var(--fw-semibold);
  --button-primary-bg: var(--color-brand);
  --button-primary-bg-hover: var(--color-brand-hover);
  --button-accent-bg: var(--color-action);
  --button-accent-bg-hover: var(--color-action-hover);
  --button-outline-border: var(--color-border-strong);
  --button-outline-border-hover: var(--color-brand);

  /* Input */
  --input-height: 3.25rem;  /* 52 */
  --input-radius: var(--radius-sm);
  --input-border: var(--color-border-strong);
  --input-border-focus: var(--pine-600);
  --input-border-invalid: var(--color-danger);
  --input-bg: var(--color-surface);

  /* Icon tile */
  --tile-size: 3.125rem;    /* 50 */
  --tile-radius: var(--radius-icon);

  /* Header */
  --header-height: 5.25rem;          /* 84 */
  --header-height-scrolled: 4.375rem; /* 70 */
  --header-bg: var(--color-header-glass);

  /* Footer */
  --footer-bg: var(--color-surface-inverse-deep);
  --footer-text: var(--color-text-inverse-muted);
  --footer-heading: var(--color-text-inverse-accent);

  /* Mobile action bar */
  --actionbar-bg: var(--deep-a95);
  --actionbar-radius: 1.25rem;

  /* Card on inverse surfaces */
  --inverse-fill: var(--white-a07);
  --inverse-fill-faint: var(--white-a03);

  /* Apple-style tiles and navigation */
  --gnav-height: 2.75rem;          /* 44 */
  --localnav-height: 3.25rem;      /* 52 */
  --gnav-bg: rgba(255, 253, 249, .8);
  --gnav-bg-dark: rgba(21, 43, 39, .78);
  --gnav-blur: saturate(1.8) blur(20px);
  --tile-gap: .75rem;              /* 12 */
  --tile-light-bg: var(--pine-50);
  --tile-white-bg: var(--paper-50); /* warm ivory page, not screen white */
  --tile-dark-bg: var(--pine-975);
  --tile-dark-text: var(--cream-50);
  --tile-dark-sub: var(--pine-300);
  --tile-title: 4.5rem;            /* 72: serif display reads smaller than the sans it replaced */
  --tile-title-half: 3.25rem;      /* 52 */
  --tile-sub: 1.75rem;             /* 28 */
  --tile-sub-half: 1.3125rem;      /* 21 */
  --pill-radius: 980px;
  --pill-px: 1.3125rem;            /* 21 */
  --pill-py: .6875rem;             /* 11 */
  --pill-line-dark: var(--clay-300);
  --card-radius: var(--radius-lg);

  /* z-index scale */
  --z-menu: 55;
  --z-header: 60;
  --z-bar: 70;
  --z-grain: 80;
  --z-toast: 200;
  --z-skip: 300;
}