/* ==========================================================================
   Parakeeto brand tokens — shared by every template and live page.
   Source of truth: the Parakeeto Design System (Claude Design).

   Templates and pages must reference these variables rather than hardcoding
   hex values, px sizes, or font names. If a value needs to change brand-wide,
   it changes here once.

   Usage (from templates/<name>/ or pages/<slug>/, both two levels deep):
     <link rel="stylesheet" href="../../shared/brand.css">
   ========================================================================== */

/* --------------------------------------------------------------------------
   Nunito Sans — self-hosted variable font (Google Fonts webfont binaries).
   One file per unicode subset covers the full 400–900 weight range, so the
   browser downloads at most one or two of these regardless of how many
   weights the page uses. Non-latin subsets cost nothing unless the page
   actually contains those characters.

   NOTE (carried over from the design system): no licensed Nunito Sans
   binaries were provided, so these are the Google Fonts builds. If licensed
   Heavy / Ultra Bold weights arrive later, replace the files in
   shared/fonts/ and keep these declarations.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/nunito-sans-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: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/nunito-sans-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: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/nunito-sans-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/nunito-sans-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/nunito-sans-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/nunito-sans-italic-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: 'Nunito Sans';
  font-style: italic;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/nunito-sans-italic-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: 'Nunito Sans';
  font-style: italic;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/nunito-sans-italic-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/nunito-sans-italic-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/nunito-sans-italic-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* --------------------------------------------------------------------------
   Color
   -------------------------------------------------------------------------- */

:root {
  /* ---- Brand core (the only three brand colors) ---- */
  --teal-900: #244D5B;    /* deep teal — primary: headers, dark sections, body text (Pantone 5473 C) */
  --seafoam-400: #86C8BC; /* seafoam — accent: buttons, highlights, CTAs (Pantone 564 C) */
  --cream-50: #FCF9F5;    /* warm cream — surface: page & card backgrounds */

  /* ---- Deep teal tints/shades (borders, muted text, hover) ---- */
  --teal-950: #1A3A45;    /* shade — teal pressed / darker sections */
  --teal-60:  rgba(36, 77, 91, 0.6);  /* muted text on cream */
  --teal-20:  rgba(36, 77, 91, 0.2);  /* input border / strong border */
  --teal-14:  rgba(36, 77, 91, 0.14); /* card border */
  --teal-10:  rgba(36, 77, 91, 0.1);  /* faint border */

  /* ---- Seafoam tints (hover, focus, fills) ---- */
  --seafoam-600: #5FA99C; /* hover / eyebrow & accent text on cream */
  --seafoam-200: #B8DDD6; /* light */
  --seafoam-50:  #E4F2EF; /* faintest fill */

  /* ---- White-on-dark opacities (text/borders on deep teal) ---- */
  --cream-75: rgba(252, 249, 245, 0.75); /* muted text on teal */
  --cream-55: rgba(252, 249, 245, 0.55);
  --cream-25: rgba(252, 249, 245, 0.25); /* border on teal */
  --cream-12: rgba(252, 249, 245, 0.12);
  --cream-06: rgba(252, 249, 245, 0.06); /* input fill on teal */

  /* ---- Semantic aliases ---- */
  --surface-canvas: var(--cream-50);
  --surface-card: #FFFFFF;      /* cards sit as clean white on the cream canvas */
  --surface-brand: var(--teal-900);
  --surface-brand-deep: var(--teal-950);
  --surface-accent: var(--seafoam-400);

  --text-strong: var(--teal-900);
  --text-body: var(--teal-900);
  --text-muted: var(--teal-60);
  --text-accent: var(--seafoam-600); /* eyebrows, small accents on cream */
  --text-on-brand: var(--cream-50);
  --text-on-brand-muted: var(--cream-75);
  --text-on-brand-accent: var(--seafoam-400);
  --text-on-accent: var(--teal-900);

  --border-subtle: var(--teal-10);
  --border-card: var(--teal-14);
  --border-default: var(--teal-20);
  --border-strong: var(--teal-900);
  --border-on-brand: var(--cream-25);

  --accent: var(--seafoam-400);
  --accent-hover: var(--seafoam-600);
  --focus-ring: rgba(134, 200, 188, 0.6); /* seafoam focus ring */
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

:root {
  --font-sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Weights — Heavy(900)/Ultra Bold(800) headers, Bold(700) buttons & secondary heads, Regular(400) body */
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-heavy: 800;   /* Ultra Bold */
  --weight-black: 900;   /* Heavy */

  /* Type scale (desktop) — mirrors the live site ramp */
  --text-h1: 64px;   /* tablet 56 / mobile 40 */
  --text-h2: 34px;   /* tablet 34 / mobile 24 */
  --text-h3: 24px;   /* tablet 24 / mobile 16 (ultra bold) */
  --text-h4: 20px;   /* tablet 20 / mobile 16 (ultra bold) */
  --text-button: 20px;   /* 20px at every breakpoint */
  --text-body: 17px;
  --text-sm: 14px;
  --text-xs: 12px;

  /* Line heights matched to the ramp */
  --leading-h1: 1.05;
  --leading-h2: 1.15;
  --leading-h3: 1.25;
  --leading-h4: 1.3;
  --leading-body: 1.6;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.08em; /* uppercase eyebrows */
}

/* --------------------------------------------------------------------------
   Space, radius, elevation
   -------------------------------------------------------------------------- */

:root {
  /* 8px-based spacing scale (names track multiples of 8) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;

  /* Radius — 8px is the standard; never pills, never > 12px on interactive elements */
  --radius-sm: 4px;   /* badges, checkboxes */
  --radius-md: 6px;   /* form inputs, tags */
  --radius: 8px;      /* STANDARD — buttons, cards, containers (rounded-lg) */
  --radius-xl: 12px;  /* decorative backdrops ONLY, never interactive */

  /* Shadows — soft, warm, low-contrast (trusted guide, not flashy fintech) */
  --shadow-sm: 0 1px 2px rgba(26, 58, 69, 0.06);
  --shadow: 0 2px 10px rgba(26, 58, 69, 0.08);
  --shadow-md: 0 8px 24px rgba(26, 58, 69, 0.10);
  --shadow-lg: 0 18px 44px rgba(26, 58, 69, 0.12);
}

/* --------------------------------------------------------------------------
   Base element defaults every page inherits
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--surface-canvas);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--teal-900);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--seafoam-600); }

/* Shared page container — 1160px content well with gutters. */
.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}