/*
 * MedsSocial design tokens — single source of truth (Phase 1).
 *
 * Plain CSS custom properties, no build step. Views map their legacy
 * per-view variables (--ink, --muted, --paper...) onto these tokens.
 * Tenant branding only ever overrides --brand / --brand-strong
 * (emitted by App\Support\TenantTheme, validated + contrast-guarded);
 * neutral tokens (ivory, ink, lines) are not customisable.
 *
 * Fonts are self-hosted under /fonts (SIL OFL 1.1, see /fonts/OFL-*.txt).
 * File names are versioned (.v1.woff2): bump the suffix when a file changes.
 */

/* ---------- Fonts ---------- */

/* Fraunces variable (opsz 9–144, wght 100–900), roman */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-latin.v1.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("../fonts/fraunces-latin-ext.v1.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;
}

/* Fraunces variable, italic (key words in headings) */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.v1.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: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin-ext.v1.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;
}

/* Hanken Grotesk variable (wght 100–900) */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin.v1.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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext.v1.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: "Hanken Grotesk";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-italic-latin.v1.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: "Hanken Grotesk";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-italic-latin-ext.v1.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;
}

/* Metric-matched local fallbacks: limit layout shift while the webfonts swap in.
   Values computed from the woff2 files vs Georgia / Arial (hhea + average lowercase width). */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 118.3%;
  ascent-override: 82.67%;
  descent-override: 21.55%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 102.2%;
  ascent-override: 97.84%;
  descent-override: 29.65%;
  line-gap-override: 0%;
}

/* ---------- Tokens (light theme) ---------- */

:root {
  /* Surfaces */
  --color-bg: #FAF6EE;              /* warm ivory page background */
  --color-surface: #FFFFFF;         /* raised cards, inputs */
  --color-surface-2: #F7F3EA;       /* sunken / secondary surfaces, soft buttons */
  --color-surface-glass: rgba(250, 246, 238, .92); /* sticky headers over content */

  /* Text */
  --color-ink: #1F2A27;             /* body text: 13.7:1 on ivory */
  --color-heading: #0A3B34;         /* Fraunces headings: 11.5:1 on ivory */
  --color-ink-muted: #5B6661;       /* secondary text: 5.5:1 on ivory (AA) — replaces #6D7D77 (4.0:1) */
  --color-ink-subtle: #7A8580;      /* placeholders / disabled only (3.6:1, never body copy) */

  /* Lines */
  --color-line: #E3DED3;
  --color-line-strong: #CFC8BA;     /* input borders */

  /* Brand (overridable per tenant by TenantTheme, which derives every variant from the
     pharmacy's own colours; see app/Support/TenantTheme.php for the contract) */
  --brand: #0B5C4F;                 /* primary as picked: backgrounds (buttons, bands) */
  --on-brand: #FFFFFF;              /* text on --brand (white or near-black) */
  --brand-text: #0B5C4F;            /* brand-coloured TEXT on light surfaces: >= 4.5:1 */
  --brand-strong: #0A3B34;          /* dark blocks under white text: >= 7:1 */
  --brand-mid: #0B5C4F;             /* gradient partner of strong, white text >= 4.5:1 */
  --brand-soft: #E8F1EC;            /* tint for chips / badges (text on it: --brand-text) */
  --brand-accent: #8BBDAC;          /* secondary: details, borders, hovers — never text */
  --brand-accent-soft: #DEF2E9;     /* secondary tint: decorative backgrounds */
  --brand-accent-line: #BFD9CF;     /* secondary tint: borders */
  --brand-wash: #DEF2E9;            /* primary tint on ivory: page/hero gradient */
  --brand-surface: #F7F3EA;         /* faint primary tint on ivory: alternate sections */
  --brand-line: #BFD9CF;            /* primary tint on ivory: highlighted card borders */
  --brand-shadow: #0A3B34;          /* shadow hue, used via color-mix() with alpha */

  /* Feedback */
  --color-danger: #B42318;          /* 6.1:1 on ivory */
  --color-danger-soft: #FDECEA;
  --color-warning: #8A5A00;
  --color-warning-soft: #FFF4E5;
  --color-success: #0B5C4F;
  --color-success-soft: #E8F1EC;
  --color-info: #244A7A;
  --color-info-soft: #EEF3FB;

  /* Type */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", "Hanken Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: .75rem;      /* 12 */
  --text-sm: .875rem;     /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.25rem;     /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 2rem;       /* 32 */
  --text-4xl: 2.75rem;    /* 44 */
  --text-5xl: clamp(2.75rem, 6vw, 5.25rem); /* hero */

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.55;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Fraunces is already tight at large optical sizes: keep tracking close to 0
     (the old -.045em/-.055em were tuned for Georgia and glue words together). */
  --ds-tracking-display: -0.01em;   /* h1 / hero */
  --ds-tracking-heading: -0.005em;  /* h2 / h3 */

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows (pine-tinted) */
  --shadow-sm: 0 1px 2px rgba(10, 59, 52, .06), 0 2px 8px rgba(10, 59, 52, .05);
  --shadow-md: 0 10px 30px rgba(10, 59, 52, .08);
  --shadow-lg: 0 24px 70px rgba(10, 59, 52, .12);
  --focus-ring: 0 0 0 2px #FAF6EE, 0 0 0 4px #0A3B34;
}

/* ---------- Opt-in utilities (no global element styles in Phase 1) ---------- */

.ds-display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  letter-spacing: var(--ds-tracking-display);
}

/* Italic key word inside a heading: <h1 class="ds-display">Tu farmacia, <em>cerca</em></h1>
   or <span class="ds-em">cerca</span> anywhere. */
.ds-em,
.ds-display em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: inherit;
  color: var(--brand-text);
}