/* =============================================================
   Sirrapa IT — Design Tokens v3.2 "Banking template, Sirrapa colours"
   Structure and style from the ui-ux-pro-max Banking/Traditional
   Finance template (Minimalism + Accessible & Ethical, IBM Plex),
   colours from the Sirrapa brand palette:
   - Ink #0A0D14 · Teal #1E8A88 (text/CTA on 700/800 for WCAG) ·
     Bronze #B45309 · Deep Dark Green dark-alt surfaces
   Legacy token names (--teal-*, --ink-*, --bronze-*, paper/stone)
   are kept as aliases so every page and inline style re-skins
   without component edits.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- CORE SEMANTIC PALETTE (Sirrapa brand colours,
       template contrast discipline) ---------- */
  --color-primary: #0A0D14;      /* Sirrapa ink — headings, dark surfaces */
  --color-on-primary: #FFFFFF;
  --color-secondary: #187775;    /* Sirrapa teal — supporting brand colour */
  --color-accent: #156C6A;       /* teal-800 — links / interactive (5.0:1 on white) */
  --color-accent-hover: #0F4F4E;
  --color-cta: #187775;          /* primary buttons: teal-700, white label (5.3:1) */
  --color-cta-hover: #0F4F4E;
  --color-gold: #B45309;         /* Sirrapa bronze — the single highlight (4.6:1) */
  --color-background: #FAFAFA;   /* page */
  --color-surface: #FFFFFF;      /* cards */
  --color-foreground: #0A0D14;
  --color-muted: #F4F5F7;
  --color-border: #E3E5EA;
  --color-destructive: #8C3A2E;
  --color-ring: #0A0D14;

  /* ---------- LEGACY ALIASES (original Sirrapa ramps) ---------- */

  /* Ink — the institutional dark */
  --ink-900: #0A0D14;
  --ink-800: #141822;
  --ink-700: #1F2430;
  --ink-600: #2A3140;

  /* Teal — Sirrapa's primary brand colour */
  --teal-900: #0F4F4E;
  --teal-800: #156C6A;
  --teal-700: #187775;
  --teal-600: #1E8A88;   /* BRAND: Sirrapa Teal (decorative; text uses 800+) */
  --teal-500: #3AA3A1;
  --teal-400: #6FC0BE;
  --teal-300: #A8DAD9;
  --teal-200: #D4EDEC;
  --teal-100: #EAF6F5;

  /* Deep Dark Green — stability, dark alt surfaces */
  --green-900: #152218;
  --green-800: #1B2E21;
  --green-700: #22392A;
  --green-600: #2E4E37;
  --green-500: #3E6749;

  /* Bronze / Gold — the highlight accent */
  --bronze-900: #7C3808;
  --bronze-800: #96480A;
  --bronze-700: #B45309;
  --bronze-600: #C66215;
  --bronze-500: #D97E2A;
  --bronze-400: #E9A263;
  --bronze-300: #F3C89A;

  /* Neutrals — cool, clean (Sirrapa) */
  --paper-0:  #FFFFFF;
  --paper-50: #FAFAFA;
  --paper-100: #F4F5F7;
  --stone-200: #E3E5EA;
  --stone-300: #CBCFD6;
  --stone-500: #6E7480;
  --stone-700: #3D424C;

  /* Semantic states (Sirrapa, desaturated) */
  --success: #2E4E37;
  --warning: #B45309;
  --danger:  #8C3A2E;
  --info:    #156C6A;

  /* Semantic aliases (foreground / background) */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-800);
  --fg-3: var(--stone-700);
  --fg-4: var(--stone-500);
  --fg-inverse: var(--paper-0);
  --fg-accent: var(--teal-600);
  --fg-highlight: var(--bronze-700);

  --bg-page: var(--paper-50);
  --bg-surface: var(--paper-0);
  --bg-quiet: var(--paper-100);
  --bg-dark: var(--ink-900);
  --bg-dark-alt: var(--green-700);

  --border: var(--stone-200);
  --border-strong: var(--stone-300);
  --border-dark: var(--ink-600);

  /* ---------- TYPE — IBM Plex Sans (financial, trustworthy) ---------- */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type ramp */
  --fs-display: 58px;  --lh-display: 66px;
  --fs-h1: 42px;       --lh-h1: 52px;
  --fs-h2: 30px;       --lh-h2: 40px;
  --fs-h3: 22px;       --lh-h3: 30px;
  --fs-lede: 19px;     --lh-lede: 31px;
  --fs-p:   16px;      --lh-p:   26px;
  --fs-small: 14px;    --lh-small: 21px;
  --fs-micro: 12px;    --lh-micro: 16px;
  --fs-quote: 26px;    --lh-quote: 38px;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- RADII (soft-professional) ---------- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  /* ---------- SHADOWS (slate-tinted, one elevation scale) ---------- */
  --shadow-hairline: 0 1px 0 rgba(2,6,23,0.06);
  --shadow-soft: 0 1px 2px rgba(2,6,23,0.05), 0 8px 24px rgba(2,6,23,0.06);
  --shadow-lift: 0 2px 4px rgba(2,6,23,0.07), 0 16px 40px rgba(2,6,23,0.10);
  --shadow-inner: inset 0 0 0 1px var(--border);

  /* ---------- LAYOUT ---------- */
  --container: 1200px;
  --gutter: 24px;
  --gutter-mobile: 16px;
  --nav-h: 72px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 300ms;
}

/* =============================================================
   Base / reset-ish
   ============================================================= */

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  font-weight: 400;
}

/* Visible focus for keyboard users — 3px ring (Accessible & Ethical) */
:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* =============================================================
   Semantic type — Poppins headings, Open Sans body
   ============================================================= */

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.005em;
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h4, .h4 { font-family: var(--font-display); font-weight: 600; color: var(--fg-1); }

.lede {
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--fg-2);
  font-weight: 400;
  text-wrap: pretty;
}

p, .p {
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-3); }
.micro { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--fg-4); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 600; }

.quote, blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

a {
  color: var(--fg-accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

/* =============================================================
   Utility atoms
   ============================================================= */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Buttons — sentence case, 44px+ touch target, clear states */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--color-cta); color: var(--color-on-primary); box-shadow: var(--shadow-hairline); }
.btn--primary:hover { background: var(--color-cta-hover); }

.btn--secondary { background: transparent; color: var(--ink-900); border-color: var(--stone-300); }
.btn--secondary:hover { background: var(--ink-900); color: var(--paper-0); border-color: var(--ink-900); }

.btn--ghost { background: transparent; color: var(--fg-1); }
.btn--ghost:hover { color: var(--color-accent); }

.btn--bronze { background: var(--bronze-700); color: var(--paper-0); }
.btn--bronze:hover { background: var(--bronze-800); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-accent);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.rule-gold, .rule-bronze {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-gold);
  border: 0;
  border-radius: 999px;
}
.rule-teal {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-accent);
  border: 0;
  border-radius: 999px;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-soft); border-color: var(--stone-300); }

.input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-p);
  color: var(--fg-1);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.input::placeholder { color: var(--fg-4); }
.input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(24,119,117,0.18); }
.input:disabled { opacity: 0.45; }

.label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--fg-2);
  margin-bottom: var(--space-2);
}

/* =============================================================
   Dark section treatment — navy, blue accents
   ============================================================= */

.surface-dark {
  background: var(--bg-dark);
  color: var(--paper-0);
}
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark .display, .surface-dark .quote, .surface-dark blockquote { color: var(--paper-0); }
.surface-dark p, .surface-dark .p, .surface-dark .lede { color: rgba(255,255,255,0.80); }
.surface-dark .eyebrow { color: var(--teal-300); }
.surface-dark .rule-gold, .surface-dark .rule-bronze { background: var(--bronze-500); }
.surface-dark .rule-teal { background: var(--teal-400); }
.surface-dark a { color: var(--teal-300); }
.surface-dark :focus-visible { outline-color: var(--teal-300); }

.surface-green {
  background: var(--green-700);
  color: var(--paper-0);
}
.surface-green h1, .surface-green h2, .surface-green h3, .surface-green .display { color: var(--paper-0); }
.surface-green p, .surface-green .p, .surface-green .lede { color: rgba(255,255,255,0.80); }
.surface-green .eyebrow { color: var(--teal-300); }
.surface-green .rule-bronze { background: var(--bronze-500); }
.surface-green :focus-visible { outline-color: var(--teal-300); }