/* Webfonts — Google Fonts CDN for prototype; self-host + subset for production (see 05_TYPOGRAPHY.md) */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..800;1,6..72,400..800&family=Instrument+Serif:ital@0;1&family=Lora:ital,wght@0,400..700;1,400..700&family=Manrope:wght@400..800&family=Caveat:wght@400..700&family=Nanum+Pen+Script&family=Kalam:wght@300;400;700&display=swap');

/* Hallo From Suiza — colour tokens. Light = default ("papel de día"); dark = "evening paper" via [data-theme="dark"]. */
:root{
  /* base palette */
  --hfs-berry:#B4285A;         /* Swiss Berry — actions, podcast, emphasis */
  --hfs-berry-deep:#8F1E47;
  --hfs-petal:#F5C9D4;         /* Petal Pink — large personal surfaces */
  --hfs-blush:#FBF0F2;         /* Blush Paper — pale pink paper */
  --hfs-cream:#FAF6EF;         /* Alpine Cream — page base */
  --hfs-paper:#FFFFFF;         /* clean print paper */
  --hfs-coral:#E8735C;         /* Tulip Coral — warm accent */
  --hfs-lake:#A9C7D9;          /* Lake Blue — pastel surface */
  --hfs-lake-deep:#37667F;     /* readable lake */
  --hfs-sage:#B9CBAF;          /* Meadow Sage — pastel surface */
  --hfs-sage-deep:#4E6A4D;     /* readable sage */
  --hfs-sun:#F6DE96;           /* Sunlight Yellow — highlighter */
  --hfs-sun-soft:#FBEDBB;
  --hfs-red:#DA291C;           /* Swiss Red — stamps/franking only */
  --hfs-ink:#3A2A28;           /* Chocolate Ink — body text */
  --hfs-ink-soft:#6E5B57;      /* secondary text */
  --hfs-ink-faint:#A5928D;     /* metadata */
  --hfs-line:#E8DCD2;          /* hairlines on cream */
  --hfs-line-strong:#D4C3B6;
  /* semantic — surfaces */
  --surface-page:var(--hfs-cream);
  --surface-card:var(--hfs-paper);
  --surface-blush:var(--hfs-blush);
  --surface-petal:var(--hfs-petal);
  --surface-lake:#E3EEF4;
  --surface-sage:#E9F0E3;
  --surface-sun:var(--hfs-sun-soft);
  --surface-inverse:#2B1E1C;
  /* semantic — text */
  --text-body:var(--hfs-ink);
  --text-soft:var(--hfs-ink-soft);
  --text-meta:var(--hfs-ink-faint);
  --text-onberry:#FFF7F1;
  --text-oninverse:#F3E9E2;
  /* semantic — interactive */
  --action-primary:var(--hfs-berry);
  --action-primary-hover:var(--hfs-berry-deep);
  --action-link:var(--hfs-berry-deep);
  --action-link-hover:var(--hfs-coral);
  --focus-ring:#B4285A;
  --focus-ring-offset:var(--hfs-cream);
  /* semantic — feedback */
  --state-success:#3F7A4E; --state-success-bg:#E4F0E6;
  --state-warning:#9A6B1F; --state-warning-bg:#FBEDBB;
  --state-error:#B3261E;   --state-error-bg:#F9E3E1;
  /* categories */
  --cat-diario:var(--hfs-petal);    --cat-diario-deep:#A94B6B;
  --cat-hablemos:var(--hfs-lake);   --cat-hablemos-deep:var(--hfs-lake-deep);
  --cat-historias:var(--hfs-berry); --cat-historias-deep:var(--hfs-berry-deep);
  --cat-explora:var(--hfs-sage);    --cat-explora-deep:var(--hfs-sage-deep);
  /* podcast */
  --podcast-wave:var(--hfs-berry); --podcast-panel:#2B1E1C; --podcast-panel-text:#F3E9E2;
  color-scheme:light;
}
[data-theme="dark"]{
  /* evening paper — deep chocolate/plum, desaturated pinks */
  --hfs-berry:#D97C9E; --hfs-berry-deep:#E39CB6;
  --hfs-petal:#6B4552; --hfs-blush:#3A2A31; --hfs-cream:#241A19; --hfs-paper:#2E2323;
  --hfs-coral:#E09480; --hfs-lake:#4E6B7C; --hfs-lake-deep:#9FC0D1;
  --hfs-sage:#54684F; --hfs-sage-deep:#AFC6A5; --hfs-sun:#C9A94E; --hfs-sun-soft:#4A3D22;
  --hfs-red:#E0554A; --hfs-ink:#F0E4DC; --hfs-ink-soft:#C4AFA7; --hfs-ink-faint:#8E7B75;
  --hfs-line:#42322F; --hfs-line-strong:#57423E;
  --surface-page:#241A19; --surface-card:#2E2323; --surface-blush:#38292E; --surface-petal:#4A3038;
  --surface-lake:#2C3A42; --surface-sage:#303B2D; --surface-sun:#41371F; --surface-inverse:#F0E4DC;
  --text-body:#F0E4DC; --text-soft:#C4AFA7; --text-meta:#8E7B75; --text-onberry:#2B161E; --text-oninverse:#2B1E1C;
  --action-primary:#D97C9E; --action-primary-hover:#E39CB6; --action-link:#E39CB6; --action-link-hover:#E09480;
  --focus-ring:#E39CB6; --focus-ring-offset:#241A19;
  --state-success:#8FBF9A; --state-success-bg:#2C3B2F; --state-warning:#D9B36A; --state-warning-bg:#41371F;
  --state-error:#E08A83; --state-error-bg:#472A28;
  --cat-diario:#6B4552; --cat-diario-deep:#E0A9BC; --cat-hablemos:#4E6B7C; --cat-hablemos-deep:#9FC0D1;
  --cat-historias:#D97C9E; --cat-historias-deep:#E39CB6; --cat-explora:#54684F; --cat-explora-deep:#AFC6A5;
  --podcast-wave:#D97C9E; --podcast-panel:#1C1312; --podcast-panel-text:#F0E4DC;
  color-scheme:dark;
}

/* Typography tokens. Display serif + handwritten face pending user decision — candidates aliased here. */
:root{
  --font-display:'Newsreader', Georgia, serif;            /* CONFIRMED by user */
  --font-display-newsreader:'Newsreader', Georgia, serif;
  --font-display-instrument:'Instrument Serif', Georgia, serif;
  --font-display-lora:'Lora', Georgia, serif;
  --font-body:'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-hand:'Caveat', cursive;                           /* working default; candidates below */
  --font-hand-caveat:'Caveat', cursive;
  --font-hand-nanum:'Nanum Pen Script', cursive;
  --font-hand-kalam:'Kalam', cursive;
  /* fluid scale (390px → 1440px) */
  --text-display:clamp(2.75rem, 1.55rem + 4.6vw, 5rem); /* @kind other */
  --text-h1:clamp(2.125rem, 1.6rem + 2.1vw, 3.25rem); /* @kind other */
  --text-h2:clamp(1.625rem, 1.33rem + 1.2vw, 2.25rem); /* @kind other */
  --text-h3:clamp(1.3125rem, 1.18rem + 0.55vw, 1.625rem); /* @kind other */
  --text-h4:1.125rem;
  --text-lead:clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* @kind other */
  --text-body-size:1.0625rem;
  --text-small:0.9375rem;
  --text-caption:0.8125rem;
  --text-label:0.75rem;
  --text-hand:clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); /* @kind other */
  --text-quote:clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); /* @kind other */
  /* line heights */
  --leading-display:1.05; --leading-heading:1.15; --leading-body:1.7; --leading-tight:1.4; --leading-caption:1.5;
  /* tracking */
  --tracking-display:-0.015em; --tracking-body:0; --tracking-label:0.14em; --tracking-button:0.02em;
  /* weights */
  --weight-display:500; --weight-display-bold:700; --weight-body:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  /* measures */
  --measure-article:44rem;   /* ≈704px reading width */
  --measure-lead:38rem; --measure-caption:30rem;
}

/* Layout, spacing, elevation, motion tokens */
:root{
  /* spacing scale (4px base) */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;
  --section-gap:clamp(4rem, 3rem + 5vw, 8rem); /* @kind other */
  --card-gap:clamp(1.25rem, 1rem + 1.2vw, 2rem); /* @kind other */
  /* grid + widths */
  --width-max:82.5rem; /* @kind other */   /* 1320px content */
  --width-wide:90rem; /* @kind other */    /* 1440px full-bleed cap */
  --gutter:clamp(1.75rem, 5vw, 3.5rem); /* @kind other */
  --grid-cols:12; /* @kind other */ --grid-gap:clamp(1rem, 2vw, 1.5rem); /* @kind other */
  /* radii */
  --radius-xs:4px; --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px; --radius-photo:2px;
  /* borders */
  --border-hairline:1px solid var(--hfs-line); /* @kind other */ --border-strong:1.5px solid var(--hfs-line-strong); /* @kind other */ --border-ink:2px solid var(--hfs-ink); /* @kind other */
  /* shadows — warm-tinted paper elevation */
  --shadow-print:0 1px 2px rgba(58,42,40,.08), 0 4px 14px rgba(58,42,40,.07);
  --shadow-lift:0 2px 4px rgba(58,42,40,.09), 0 12px 28px rgba(58,42,40,.12);
  --shadow-float:0 6px 12px rgba(58,42,40,.10), 0 24px 48px rgba(58,42,40,.16);
  --shadow-tape:0 1px 3px rgba(58,42,40,.18);
  /* z-index */
  --z-base:0; /* @kind other */ --z-decor:1; /* @kind other */ --z-content:2; /* @kind other */ --z-sticky:40; /* @kind other */ --z-header:50; /* @kind other */ --z-overlay:80; /* @kind other */ --z-modal:90; /* @kind other */ --z-toast:100; /* @kind other */
  /* motion */
  --motion-fast:160ms; /* @kind other */ --motion-base:260ms; /* @kind other */ --motion-slow:420ms; /* @kind other */ --motion-reveal:640ms; /* @kind other */
  --ease-out:cubic-bezier(.22,.8,.36,1); /* @kind other */ --ease-paper:cubic-bezier(.34,1.28,.44,1); /* @kind other */ --ease-in-out:cubic-bezier(.6,0,.3,1); /* @kind other */
  /* icons + focus */
  --icon-sm:16px; /* @kind other */ --icon-md:20px; /* @kind other */ --icon-lg:28px; /* @kind other */
  --focus-outline:2px solid var(--focus-ring); /* @kind other */ --focus-offset:3px; /* @kind other */
  /* image ratios */
  --ratio-hero:16/9; /* @kind other */ --ratio-hero-portrait:4/5; /* @kind other */ --ratio-card:3/2; /* @kind other */ --ratio-podcast:1/1; /* @kind other */ --ratio-guest:4/5; /* @kind other */ --ratio-panorama:21/9; /* @kind other */ --ratio-social:4/5; /* @kind other */
  /* torn edge */
  --torn-height:28px; /* @kind other */ --torn-height-lg:44px; /* @kind other */
}
[data-theme="dark"]{
  --shadow-print:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3);
  --shadow-lift:0 2px 4px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45);
  --shadow-float:0 6px 12px rgba(0,0,0,.45), 0 24px 48px rgba(0,0,0,.55);
  --shadow-tape:0 1px 3px rgba(0,0,0,.5);
}