/* Cambio v0.1.12: Art Bible tokens (copied verbatim from cambio-art-bible/tokens.css) + self-hosted fonts.
   Fonts: Fraunces and Plus Jakarta Sans (SIL OFL 1.1, assets/fonts/OFL.txt), served from this origin, precached by sw.js. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../assets/fonts/Fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../assets/fonts/Fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../assets/fonts/PlusJakartaSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../assets/fonts/PlusJakartaSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ---------- Type ---------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* always with tabular-nums */
  --num-features: "tnum" 1, "lnum" 1;

  /* Portrait scale (landing, modals in portrait), fluid 360 to 430 px wide */
  --fs-p-display: clamp(2.25rem, 1.6rem + 2.8vw, 2.75rem); /* 36 to 44 */
  --fs-p-h1: 1.75rem;   /* 28 */
  --fs-p-h2: 1.375rem;  /* 22 */
  --fs-p-h3: 1.125rem;  /* 18 */
  --fs-p-body: 1rem;    /* 16 */
  --fs-p-small: 0.875rem; /* 14 */
  --fs-p-caption: 0.75rem; /* 12 */

  /* Landscape table scale, keyed to viewport HEIGHT (320 to 390 px) */
  --fs-l-title: clamp(1.125rem, 0.6rem + 2.2vh, 1.375rem);   /* 18 to 22 */
  --fs-l-body: clamp(0.8125rem, 0.55rem + 1.2vh, 0.9375rem); /* 13 to 15 */
  --fs-l-label: clamp(0.6875rem, 0.5rem + 0.8vh, 0.8125rem); /* 11 to 13 */
  --fs-l-score: clamp(1rem, 0.5rem + 2vh, 1.25rem);          /* 16 to 20 */
  --fs-l-cambio: clamp(0.9375rem, 0.55rem + 1.6vh, 1.125rem); /* 15 to 18 */
  --fs-ad-label: 0.6875rem; /* 11, fixed */

  --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.5;
  --tracking-caps: 0.08em; --tracking-display: -0.01em;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---------- Space (4 px base) ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---------- Radius ---------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --r-card: 7%; /* of card width, set with aspect-ratio box */

  /* ---------- Sizes ---------- */
  --tap-min: 44px;          /* default for every control */
  --tap-floor: 32px;        /* absolute floor, cramped 568x320 only */
  --tap-gap: 8px;           /* min gap between adjacent targets */
  --card-ratio: 5 / 7;      /* poker card 63.5 x 88.9 mm */
  --card-w-self: clamp(52px, 13.5vh, 64px);   /* your hand */
  --card-w-opp: clamp(26px, 7.4vh, 32px);     /* opponent visual size */
  --card-hit-opp: 36px;     /* opponent invisible hit box, never < 32 */
  --card-w-pile: clamp(46px, 12vh, 56px);
  --avatar: clamp(32px, 9vh, 40px);
  --ad-gap-min: 16px;       /* design-time; runtime guard enforces 24px */
  --ad-gap-runtime: 24px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-flip: cubic-bezier(0.45, 0, 0.2, 1);
  --ease-settle: cubic-bezier(0.34, 1.3, 0.64, 1); /* max 8% overshoot */
  --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms;
  --dur-flip: 360ms; --dur-deal: 280ms; --dur-deal-stagger: 70ms;
  --dur-swap: 520ms; --dur-peek-hold: 1600ms; --dur-cambio: 900ms;
  --dur-toast: 3200ms;

  /* ---------- Z layers ---------- */
  --z-room: 0; --z-table: 10; --z-cards: 20; --z-hud: 30; --z-ads: 35;
  --z-drawer: 40; --z-toast: 50; --z-modal: 60; --z-banner: 70; --z-gate: 80;
}

/* ===================== FAMILY ROOM (default, light) ===================== */
:root, [data-theme="family"] {
  color-scheme: light;
  /* Surfaces */
  --c-bg: #F5EFE4;            /* cream, page and room wall */
  --c-surface: #FBF8F2;       /* panels, modals */
  --c-surface-2: #EFE7D8;     /* sunken, inputs */
  --c-surface-3: #E4D9C6;     /* pressed, dividers on cream */
  --c-scrim: rgba(30, 42, 44, 0.55);
  --c-border: #D8CDB9;
  --c-border-strong: #B8AA92;

  /* Room and table */
  --c-room-top: #EDE4D3;
  --c-room-floor: #D9CBB2;
  --c-felt: #2E6A64;          /* teal-sage felt, centre */
  --c-felt-edge: #22524D;     /* vignette edge */
  --c-felt-line: rgba(243, 238, 226, 0.18); /* betting-line style inset ring */
  --c-rail: #6B4F3A;          /* walnut rail */
  --c-rail-hi: #8A6A50;
  --c-rail-lo: #4B3628;
  --c-on-felt: #F3EEE2;
  --c-on-felt-muted: #CFE0D8;

  /* Ink and text */
  --c-ink: #1E2A2C;           /* primary text */
  --c-text-2: #4A5557;
  --c-text-3: #5F6A6B;        /* lowest allowed for text */
  --c-text-disabled: #9AA2A0; /* non-text / disabled only */

  /* Accents */
  --c-accent: #1F6B66;        /* teal, primary actions */
  --c-accent-hover: #185853;
  --c-accent-press: #13463F;
  --c-on-accent: #FBF8F2;
  --c-sage: #8FA98F;          /* secondary accent, decorative only */
  --c-sage-soft: #DCE5D9;
  --c-cambio: #E8B04B;        /* Cambio call button, warm amber */
  --c-cambio-hover: #D99E36;
  --c-on-cambio: #1E2A2C;

  /* Status */
  --c-success: #2B6E4F; --c-success-soft: #DDEBE2;
  --c-warn: #8A5A12;    --c-warn-soft: #F6E6C6; --c-warn-flash: #F2C14E;
  --c-danger: #A8402F;  --c-danger-soft: #F4DCD5; --c-on-danger: #FFFFFF;
  --c-danger-fill: #A8402F; /* danger chips and timer-critical fill */

  /* Focus */
  --c-focus: #0B6E8A;         /* on cream surfaces */
  --c-focus-on-felt: #F2C14E; /* on felt */
  --focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-focus);

  /* Ad zone */
  --c-ad-bg: #EEE7DA;
  --c-ad-frame: #CFC3AE;
  --c-ad-label: #5F6A6B;

  /* Cards */
  --c-card-face: #FFFDF7;
  --c-card-edge: #E3DACA;
  --c-card-ink: #1E2A2C;      /* spades, also index of black suits */
  --c-card-red: #B3382C;      /* hearts */
  --c-card-blue: #1F5A9E;     /* diamonds (4-colour mode) */
  --c-card-green: #2C6B43;    /* clubs (4-colour mode) */
  --c-card-back: #2E6A64;     /* "Linen Lattice" back */
  --c-card-back-2: #22524D;
  --c-card-back-line: #E9E1D0;
  --c-power: #1F6B66;         /* power indicator chip */
  --c-power-ink: #FBF8F2;

  /* States */
  --c-selected: #F2C14E;
  --c-peek: #6FB7C9;
  --c-swap: #E8B04B;

  /* Shadows (warm, ink-based, never pure black) */
  --sh-1: 0 1px 2px rgba(30, 42, 44, 0.12);
  --sh-2: 0 2px 6px rgba(30, 42, 44, 0.14), 0 1px 2px rgba(30, 42, 44, 0.10);
  --sh-3: 0 10px 28px rgba(30, 42, 44, 0.20), 0 2px 6px rgba(30, 42, 44, 0.12);
  --sh-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 2px 4px rgba(20, 30, 30, 0.28);
  --sh-lift: 0 8px 18px rgba(20, 30, 30, 0.32);
}

/* ===================== EVENING (dark) ===================== */
[data-theme="evening"] {
  color-scheme: dark;
  --c-bg: #111513;
  --c-surface: #1A201D;
  --c-surface-2: #222A26;
  --c-surface-3: #2C3530;
  --c-scrim: rgba(5, 7, 6, 0.68);
  --c-border: #2F3833;
  --c-border-strong: #46524B;

  --c-room-top: #161B19;
  --c-room-floor: #0C0F0E;
  --c-felt: #0F4A37;          /* deep green */
  --c-felt-edge: #093023;
  --c-felt-line: rgba(212, 179, 110, 0.22);
  --c-rail: #4A1C1F;          /* oxblood leather */
  --c-rail-hi: #6A2A2E;
  --c-rail-lo: #2E1012;
  --c-on-felt: #F2ECDF;
  --c-on-felt-muted: #B9D2C4;

  --c-ink: #F2ECDF;
  --c-text-2: #C8C0B0;
  --c-text-3: #9C9586;
  --c-text-disabled: #5E5A52;

  --c-accent: #C9A45C;        /* brushed gold, primary actions */
  --c-accent-hover: #D4B36E;
  --c-accent-press: #B08E4A;
  --c-on-accent: #16120A;
  --c-sage: #6F8C7A;
  --c-sage-soft: #1F2A24;
  --c-cambio: #8E2328;        /* oxblood red Cambio button */
  --c-cambio-hover: #A02A30;
  --c-on-cambio: #FFF6E3;

  --c-success: #5CC08F; --c-success-soft: #173326;
  --c-warn: #E6B054;    --c-warn-soft: #33270F; --c-warn-flash: #E6B054;
  --c-danger: #E8806F;  --c-danger-soft: #3A1A18; --c-on-danger: #FFFFFF;
  --c-danger-fill: #9B2A2E; /* white text 7.60:1 */

  --c-focus: #E8C77A;
  --c-focus-on-felt: #E8C77A;
  --focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-focus);

  --c-ad-bg: #171C1A;
  --c-ad-frame: #39433D;
  --c-ad-label: #A39C8D;

  --c-card-face: #F6F0E2;     /* ivory */
  --c-card-edge: #D9CFBA;
  --c-card-ink: #1B1A17;
  --c-card-red: #A8302C;
  --c-card-blue: #1F5A9E;
  --c-card-green: #2C6B43;
  --c-card-back: #6E1F24;     /* "Gilt Medallion" back */
  --c-card-back-2: #4E1418;
  --c-card-back-line: #C9A45C;
  --c-power: #C9A45C;
  --c-power-ink: #16120A;

  --c-selected: #E8C77A;
  --c-peek: #7CC3D1;
  --c-swap: #D4B36E;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --sh-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-3: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.40);
  --sh-card: 0 1px 0 rgba(255,255,255,0.35) inset, 0 3px 6px rgba(0, 0, 0, 0.45);
  --sh-lift: 0 10px 22px rgba(0, 0, 0, 0.55);
}

/* ===================== Derived, theme-agnostic ===================== */
.felt {
  background:
    radial-gradient(120% 90% at 50% 38%, var(--c-felt) 0%, var(--c-felt) 45%, var(--c-felt-edge) 100%);
  box-shadow: inset 0 0 0 2px var(--c-felt-line), inset 0 12px 30px rgba(0,0,0,0.25);
}
.felt::after { /* fine noise, 3% opacity, SVG data URI, no raster photos */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.num, .score, .timer { font-family: var(--font-num); font-feature-settings: var(--num-features); font-variant-numeric: tabular-nums lining-nums; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.felt :focus-visible { box-shadow: 0 0 0 3px var(--c-focus-on-felt); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; --dur-base: 120ms; --dur-flip: 160ms; --dur-deal: 1ms;
    --dur-deal-stagger: 0ms; --dur-swap: 200ms; --dur-cambio: 300ms;
  }
}