/* ==========================================================================
   BeenThere Expats design tokens: the single source of truth for colour, type,
   spacing, radius, shadow and motion. Components use these variables only;
   never hard-code a colour or size elsewhere. See docs/DESIGN_SYSTEM.md.

   Palette "Mediterranean Teal": sea-teal primary, sunny orange accent,
   crisp white surfaces. All text/background pairs meet WCAG AA (4.5:1),
   control borders meet 3:1, in both themes.

   Theme selection (set on <html> by the server from the theme cookie):
     data-theme="light"   light (the default for new visitors)
     data-theme="dark"    dark
     (no attribute)       "System": follows the OS setting
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/figtree/figtree-latin-wght-normal.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: "Figtree";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/figtree/figtree-latin-ext-wght-normal.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 {
  color-scheme: light;

  /* ---- Colour: light ---------------------------------------------------- */
  --color-bg: #FFFFFF;              /* page background */
  --color-surface: #FFFFFF;         /* cards, inputs, header */
  --color-surface-sunken: #F3F7F6;  /* wells, hover, table stripes, auth page */
  --color-border: #DFE7E5;          /* dividers, card outlines */
  --color-border-strong: #869793;   /* form controls (3:1 on white) */

  --color-text: #132322;
  --color-heading: #2B4F4B;          /* softer deep teal-grey for headings (9:1 on white) */
  --color-text-muted: #4E625F;

  --color-primary: #0F766E;         /* sea teal: primary actions, brand */
  --color-primary-hover: #115E59;
  --color-primary-text: #0F766E;    /* links / primary-coloured text */
  --color-primary-subtle: #E0F2EF;  /* selected states, info alerts, badges */
  --color-on-primary: #FFFFFF;

  --color-accent: #F97316;          /* sunny orange: highlights, eyebrows */
  --color-accent-text: #9A3412;
  --color-accent-subtle: #FFEDD5;

  --color-success: #15803D;
  --color-success-text: #166534;
  --color-success-subtle: #DCFCE7;

  --color-warning: #B45309;
  --color-warning-text: #92400E;
  --color-warning-subtle: #FEF3C7;

  --color-danger: #DC2626;
  --color-danger-text: #B91C1C;
  --color-danger-subtle: #FEE2E2;
  --color-on-danger: #FFFFFF;

  --color-focus: #0F766E;

  /* Brand panel (auth pages, future hero). The gradient is dark in both themes, so text on it is always white. */
  --color-on-brand: #FFFFFF;
  --color-brand-ink: #0F766E;       /* text on white buttons placed on the brand gradient */
  --brand-gradient: linear-gradient(155deg, #0F766E 0%, #115E59 55%, #134E4A 100%);

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px: body */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px: h4 */
  --text-2xl: 1.375rem;   /* 22px: h3 */
  --text-3xl: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);    /* 24–28px: h2 */
  --text-4xl: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);     /* 28–34px: h1 */
  --text-display: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);    /* 32–40px: landing hero only */

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

  --leading-tight: 1.2;
  --leading-normal: 1.55;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */

  /* ---- Shape & depth --------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(19 35 34 / 0.05), 0 1px 3px rgb(19 35 34 / 0.07);
  --shadow-md: 0 6px 16px rgb(19 35 34 / 0.08), 0 2px 4px rgb(19 35 34 / 0.05);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 35%, transparent);

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 72rem;      /* 1152px: page width */
  --container-narrow: 40rem;   /* 640px: forms, reading */
  --header-height: 4rem;
  --gutter: var(--space-4);    /* page side padding (16px on phones) */

  /* ---- Motion ---------------------------------------------------------- */
  --duration-fast: 120ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);
}

/* ---- Colour: dark ------------------------------------------------------
   Same values in both blocks below: one for an explicit choice, one for
   "System" when the OS is dark. Keep them in sync. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0C1716;
  --color-surface: #13211F;
  --color-surface-sunken: #091210;
  --color-border: #233633;
  --color-border-strong: #5E7672;
  --color-text: #E4EFED;
  --color-heading: #CFE3DF;
  --color-text-muted: #98ADA9;
  --color-primary: #2DD4BF;
  --color-primary-hover: #5EEAD4;
  --color-primary-text: #5EEAD4;
  --color-primary-subtle: #113330;
  --color-on-primary: #0C1716;
  --color-accent: #FB923C;
  --color-accent-text: #FDBA74;
  --color-accent-subtle: #3A220F;
  --color-success: #4ADE80;
  --color-success-text: #86EFAC;
  --color-success-subtle: #0F2A1A;
  --color-warning: #FBBF24;
  --color-warning-text: #FCD34D;
  --color-warning-subtle: #33260A;
  --color-danger: #F87171;
  --color-danger-text: #FCA5A5;
  --color-danger-subtle: #3B1414;
  --color-on-danger: #0C1716;
  --color-focus: #5EEAD4;
  --brand-gradient: linear-gradient(155deg, #115E59 0%, #0F2E2B 60%, #0C1716 100%);
  --color-brand-ink: #0C1716;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 6px 16px rgb(0 0 0 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-bg: #0C1716;
    --color-surface: #13211F;
    --color-surface-sunken: #091210;
    --color-border: #233633;
    --color-border-strong: #5E7672;
    --color-text: #E4EFED;
    --color-heading: #CFE3DF;
    --color-text-muted: #98ADA9;
    --color-primary: #2DD4BF;
    --color-primary-hover: #5EEAD4;
    --color-primary-text: #5EEAD4;
    --color-primary-subtle: #113330;
    --color-on-primary: #0C1716;
    --color-accent: #FB923C;
    --color-accent-text: #FDBA74;
    --color-accent-subtle: #3A220F;
    --color-success: #4ADE80;
    --color-success-text: #86EFAC;
    --color-success-subtle: #0F2A1A;
    --color-warning: #FBBF24;
    --color-warning-text: #FCD34D;
    --color-warning-subtle: #33260A;
    --color-danger: #F87171;
    --color-danger-text: #FCA5A5;
    --color-danger-subtle: #3B1414;
    --color-on-danger: #0C1716;
    --color-focus: #5EEAD4;
    --brand-gradient: linear-gradient(155deg, #115E59 0%, #0F2E2B 60%, #0C1716 100%);
    --color-brand-ink: #0C1716;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 6px 16px rgb(0 0 0 / 0.45);
  }
}