/* =========================================================================
   CRETH Design System — Colors & Type
   Built for warmth, accessibility (WCAG AAA target), and a humanist voice.
   All colors tested for contrast against fg-on-navy and fg-on-surface pairs.
   ========================================================================= */

/* ---------- Webfont: Nunito (humanist sans, accessibility-friendly) ------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Nunito+Sans:wght@400;600;700&display=swap');

:root {
  /* ======================================================================
     BRAND COLORS — extracted from the CRETH logo + live website
     ====================================================================== */

  /* Primary navy — the signature brand background */
  --creth-navy-900: #1E1F5E;   /* deepest, for text on light */
  --creth-navy-800: #2B2C73;   /* primary brand navy (hero bg) */
  --creth-navy-700: #3A3B8A;   /* hover / lighter fills */
  --creth-navy-600: #5051A3;   /* decorative / muted accents */
  --creth-navy-300: #B8B9DB;   /* tints for chips, dividers on dark */
  --creth-navy-100: #EDEEF7;   /* very soft navy wash for surfaces */

  /* Orange — the warm, hopeful accent. CTAs, highlights, hover. */
  --creth-orange-700: #C55A2E; /* deepest, for text on light */
  --creth-orange-600: #E06838; /* hover / pressed */
  --creth-orange-500: #EC7A4B; /* primary CTA */
  --creth-orange-400: #F28F68; /* soft hover tint */
  --creth-orange-200: #FAD6C3; /* tinted backgrounds */
  --creth-orange-100: #FDEEE5; /* soft wash */

  /* Red — secondary, used in SATIH mark + error/attention */
  --creth-red-700:   #B6223A;
  --creth-red-600:   #D32C47;
  --creth-red-500:   #E74A63;
  --creth-red-100:   #FBE4E8;

  /* ======================================================================
     NEUTRALS — warm-leaning greys so the brand doesn't feel clinical
     ====================================================================== */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #FAF8F5;   /* warm paper white — page bg alt */
  --neutral-100:  #F3F0EB;   /* warm surface */
  --neutral-200:  #E8E3DB;   /* dividers, borders light */
  --neutral-300:  #CFC8BC;   /* muted borders */
  --neutral-400:  #A59D8E;   /* placeholder text */
  --neutral-500:  #7A7366;   /* secondary text */
  --neutral-600:  #57523F;   /* tertiary labels */
  --neutral-700:  #3D3A2F;   /* body alt */
  --neutral-800:  #26251F;   /* body */
  --neutral-900:  #14130F;   /* headings */

  /* ======================================================================
     SEMANTIC TOKENS — what the rest of the system should actually use
     ====================================================================== */

  /* Backgrounds */
  --bg-page:        var(--neutral-50);       /* default page */
  --bg-surface:     var(--neutral-0);        /* cards, panels */
  --bg-surface-alt: var(--neutral-100);      /* striped rows, quiet fills */
  --bg-brand:       var(--creth-navy-800);   /* hero, brand sections */
  --bg-brand-deep:  var(--creth-navy-900);   /* footers, dark accents */
  --bg-accent-soft: var(--creth-orange-100); /* callouts, info blocks */

  /* Foregrounds */
  --fg-1:           var(--neutral-900);      /* primary text */
  --fg-2:           var(--neutral-700);      /* body text */
  --fg-3:           var(--neutral-500);      /* secondary / captions */
  --fg-4:           var(--neutral-400);      /* placeholder / disabled */
  --fg-on-brand:    var(--neutral-0);        /* text on navy */
  --fg-on-brand-2:  var(--creth-navy-300);   /* muted text on navy */
  --fg-on-accent:   var(--neutral-0);        /* text on orange */
  --fg-link:        var(--creth-orange-700); /* links on light bg */
  --fg-link-hover:  var(--creth-orange-600);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-500);
  --border-focus:   var(--creth-orange-500);

  /* Interactive — primary = orange CTA */
  --action-primary:          var(--creth-orange-500);
  --action-primary-hover:    var(--creth-orange-600);
  --action-primary-pressed:  var(--creth-orange-700);
  --action-primary-fg:       var(--neutral-0);

  /* Interactive — secondary = navy outline */
  --action-secondary:        transparent;
  --action-secondary-border: var(--creth-navy-800);
  --action-secondary-fg:     var(--creth-navy-800);
  --action-secondary-hover:  var(--creth-navy-100);

  /* Status */
  --status-info:    #2F6EBE;
  --status-info-bg: #E6EFFA;
  --status-success:    #2F7A4B;
  --status-success-bg: #E6F3EB;
  --status-warning:    #B86A10;
  --status-warning-bg: #FBEED4;
  --status-danger:     var(--creth-red-600);
  --status-danger-bg:  var(--creth-red-100);

  /* Focus ring — highly visible (accessibility) */
  --focus-ring: 0 0 0 3px var(--creth-orange-200), 0 0 0 5px var(--creth-orange-600);

  /* ======================================================================
     TYPE SCALE — generous sizing for readability (AAA)
     Minimum body size 17px. Line heights tuned for warmth.
     ====================================================================== */
  --font-sans:    'Nunito', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Nunito', system-ui, sans-serif; /* heavier weights */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights — Nunito scale */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* Sizes — fluid but with min/max clamps for accessibility */
  --fs-xs:    0.875rem;   /* 14 — captions only */
  --fs-sm:    1rem;       /* 16 — secondary UI */
  --fs-base:  1.0625rem;  /* 17 — body minimum */
  --fs-md:    1.125rem;   /* 18 — default body */
  --fs-lg:    1.25rem;    /* 20 — lead paragraphs */
  --fs-xl:    1.5rem;     /* 24 — h4 / big UI */
  --fs-2xl:   1.875rem;   /* 30 — h3 */
  --fs-3xl:   2.375rem;   /* 38 — h2 */
  --fs-4xl:   3rem;       /* 48 — h1 / section */
  --fs-5xl:   3.75rem;    /* 60 — display */
  --fs-6xl:   4.75rem;    /* 76 — hero display */

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;      /* eyebrow text, small caps */

  /* ======================================================================
     SPACING — 4px base, extended to 128
     ====================================================================== */
  --sp-0:  0;
  --sp-1:  0.25rem;   /* 4 */
  --sp-2:  0.5rem;    /* 8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-10: 2.5rem;    /* 40 */
  --sp-12: 3rem;      /* 48 */
  --sp-16: 4rem;      /* 64 */
  --sp-20: 5rem;      /* 80 */
  --sp-24: 6rem;      /* 96 */
  --sp-32: 8rem;      /* 128 */

  /* ======================================================================
     RADII — generous, friendly curves
     ====================================================================== */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  999px;

  /* ======================================================================
     SHADOWS — soft, warm-tinted (not pure black)
     ====================================================================== */
  --shadow-xs:  0 1px 2px rgba(43, 44, 115, 0.06);
  --shadow-sm:  0 2px 6px rgba(43, 44, 115, 0.08), 0 1px 2px rgba(43, 44, 115, 0.04);
  --shadow-md:  0 6px 16px rgba(43, 44, 115, 0.10), 0 2px 4px rgba(43, 44, 115, 0.05);
  --shadow-lg:  0 16px 32px rgba(43, 44, 115, 0.12), 0 4px 8px rgba(43, 44, 115, 0.06);
  --shadow-xl:  0 24px 56px rgba(43, 44, 115, 0.18);

  /* Focus shadow variant */
  --shadow-focus: 0 0 0 4px var(--creth-orange-200);

  /* ======================================================================
     LAYOUT
     ====================================================================== */
  --container-sm:  640px;
  --container-md:  880px;
  --container-lg:  1120px;
  --container-xl:  1280px;

  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    360ms;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES — opt-in via .creth-type on a wrapper, or use vars
   ========================================================================= */

.creth-type,
.creth-type * {
  font-family: var(--font-sans);
  color: var(--fg-1);
}

.creth-type h1, .creth-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-6);
  text-wrap: balance;
}

.creth-type h2, .creth-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
}

.creth-type h3, .creth-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

.creth-type h4, .creth-h4 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

.creth-type p, .creth-body {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
  max-width: 68ch;
}

.creth-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
  max-width: 62ch;
}

.creth-caption {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.creth-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--creth-orange-700);
}

.creth-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-6xl);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
}

/* Link style — underline for a11y */
.creth-type a, a.creth-link {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}
.creth-type a:hover, a.creth-link:hover { color: var(--fg-link-hover); }

/* Focus ring — applied globally for .creth-type */
.creth-type :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}