/* PodcastHub Design Lab · shared tokens (v0.2, 2026-10-16, Rick; v0.2: --primary-on = #FFFFFF after B1 measured 4.46:1 with #FDFEFE)
   Source: guides/design/kb/05-brand-and-fonts.md §1.3 palette, §2 text-safe blues, §4.2 roles/states,
   §4.3 hex spec, §4.4 touch effects, §4.5 ramp; rules/buttons-and-touch.md; rules/materials-and-surfaces.md.
   Every option page imports this file and uses ONLY these variables (playbook law 6: tokens, never hex). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@125,500..700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  /* brand (p.12) */
  --ph-blue: #0077E2; --ph-sky: #74A3E4; --ph-amber: #F6B202; --ph-bone: #F2ECE2; --ph-white: #FDFEFE; --ph-ink: #0A0C13;
  /* text-safe blues (§2) */
  --ph-blue-fill: #0076DF;      /* under white labels, 4.51:1 */
  --ph-blue-text-bone: #006BCB; /* 4.51:1 on Bone */
  --ph-blue-text-white: #0074DD;/* 4.58:1 on White */
  --ph-blue-text-ink: #007AE7;  /* 4.59:1 on Ink */
  /* type ramp (§4.5) */
  --font-display: 'Archivo', 'Inter', system-ui, sans-serif; --font-display-stretch: 125%;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Inter', sans-serif;
  --fs-h1: 27px; --lh-h1: 1.08; --fs-h2: 22px; --lh-h2: 1.15; --fs-h3: 18px; --lh-h3: 1.3;
  --fs-body: 17px; --lh-body: 1.55; --fs-ui: 16px; --fs-label: 14px; --fs-small: 13px; /* 16 floor for content/inputs; 13–14 only for chrome labels */
  /* radii */
  --r-pill: 999px; --r-card: 24px; --r-sheet: 24px; --r-input: 14px; --r-chip: 12px; --r-tile: 16px;
  /* touch (Futuh touch tokens) */
  --t-min: 44px; --t-button: 48px; --t-button-lg: 56px; --t-row: 56px; --t-icon: 48px;
  /* motion */
  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1); --d-80: 80ms; --d-120: 120ms; --d-180: 180ms; --d-260: 260ms; --d-400: 400ms;
  --press-scale: 0.97;
  /* hex (§4.3) */
  --hex-ratio: 0.8660254; --hex-clip: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --hex-xs: 48px; --hex-sm: 64px; --hex-md: 96px; --hex-lg: 144px; --hex-r-tile: 8%;
  /* glass (materials-and-surfaces) */
  --glass-blur: 18px; --glass-sat: 160%;
  /* grain: 5 % contrast at most on booking */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* LIGHT (default): Bone page, White cards (REDESIGN-PLAN D-6) */
:root, [data-theme="light"] {
  color-scheme: light;
  --canvas: var(--ph-bone); --surface: var(--ph-white); --surface-sunken: #ECE5D9; --surface-raised: #FFFFFF; --surface-hover: #F6F1E9; --surface-active: #E9E1D4; --surface-overlay: rgba(10,12,19,0.5);
  --fg: var(--ph-ink); --fg-muted: #4A4F5C; --fg-subtle: #6B7080; --fg-disabled: #A1A5B0; --fg-inverse: var(--ph-white);
  --line: #D9D2C5; --line-subtle: #E6E0D5; --line-strong: #B9B1A3; --line-focus: var(--ph-blue);
  --primary: var(--ph-blue); --primary-fill: var(--ph-blue-fill); --primary-hover: #0064BE; --primary-active: #00519B; --primary-muted: #E1EBF4; --primary-subtle: #F1F5F9; --primary-on: #FFFFFF; /* pure white: #FDFEFE on #0076DF measures 4.46 (B1 finding 16 Oct); #FFFFFF measures 4.51 */ --primary-ink: var(--ph-blue-text-bone);
  --secondary: var(--ph-sky); --secondary-muted: #E4EDF9; --secondary-on: var(--ph-ink);
  --accent: var(--ph-amber); --accent-on: var(--ph-ink); --accent-muted: #FBEFC9;
  --success: #1F7A4D; --warning: #9A6B00; --error: #B3261E; --info: var(--ph-blue-text-bone);
  --glass-fill: rgba(253,254,254,0.62); --glass-stroke: rgba(255,255,255,0.75); --glass-shadow: 0 12px 32px rgba(10,12,19,0.12);
  --shadow-1: 0 1px 2px rgba(10,12,19,0.06), 0 2px 8px rgba(10,12,19,0.06);
  --shadow-2: 0 4px 12px rgba(10,12,19,0.08), 0 12px 32px rgba(10,12,19,0.10);
  /* tactile primary (V1 four-shadow, blue-tinted, light from above) */
  --tactile-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 -2px 0 rgba(0,0,0,0.18) inset, 0 2px 4px rgba(0,118,223,0.25), 0 8px 24px rgba(0,118,223,0.28);
  --tactile-pressed: 0 2px 6px rgba(0,0,0,0.25) inset, 0 1px 2px rgba(0,118,223,0.20);
  --ripple-color: rgba(0,119,226,0.25);
  --field-gradient: linear-gradient(135deg, #0077E2 0%, #74A3E4 100%); /* A8/A9 one-hue field, accent only */
}
/* DARK: Ink page, lifted Ink cards; "above" = lighter fill + border, no shadows (law 14 dark default) */
[data-theme="dark"] {
  color-scheme: dark;
  --canvas: var(--ph-ink); --surface: #11141C; --surface-sunken: #070910; --surface-raised: #171B25; --surface-hover: #1B2030; --surface-active: #222838; --surface-overlay: rgba(0,0,0,0.6);
  --fg: var(--ph-white); --fg-muted: #C3C7D1; --fg-subtle: #8E93A1; --fg-disabled: #5C6170; --fg-inverse: var(--ph-ink);
  --line: #262B38; --line-subtle: #1C2130; --line-strong: #3A4150; --line-focus: var(--ph-sky);
  --primary: var(--ph-blue); --primary-fill: var(--ph-blue-fill); --primary-hover: #0C8CFF; --primary-active: #005CAF; --primary-muted: #14222E; --primary-subtle: #10171E; --primary-on: #FFFFFF; --primary-ink: var(--ph-blue-text-ink);
  --secondary: var(--ph-sky); --secondary-muted: #182233; --secondary-on: var(--ph-ink);
  --accent: var(--ph-amber); --accent-on: var(--ph-ink); --accent-muted: #2A2410;
  --success: #4CC38A; --warning: #F6B202; --error: #FF6B61; --info: var(--ph-sky);
  --glass-fill: rgba(17,20,28,0.55); --glass-stroke: rgba(255,255,255,0.14); --glass-shadow: none;
  --shadow-1: none; --shadow-2: none;
  --tactile-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 -2px 0 rgba(0,0,0,0.35) inset, 0 2px 4px rgba(0,0,0,0.4), 0 8px 24px rgba(0,119,226,0.35);
  --tactile-pressed: 0 2px 6px rgba(0,0,0,0.5) inset;
  --ripple-color: rgba(116,163,228,0.35);
  --field-gradient: linear-gradient(135deg, #0077E2 0%, #74A3E4 100%);
}
@media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; } }