/* ==========================================================================
   FTS: tokens.css
   Single source of truth for all design tokens.
   No :root declarations belong in any other file.
   Order: brand → semantic → type → spacing → components → a11y.
   ========================================================================== */

:root {

  /* Brand colors ---------------------------------------------------------- */
  --black:      #000000;
  --midnight:   #101820;
  --slate:      #4C5258;
  --navy:       #072B31;
  --peacock:    #01263C;
  --denim:      #005776;
  --ocean:      #007FA3;
  --sky:        #00AEC7;
  --green:      #006D68;
  --mint:       #40C1AC;
  --red:        #D14124;
  --orange:     #FF8F1C;
  --golden:     #FFC845;
  --cream:      #D6D2C4;
  --ivory:      #F2F0EC;
  --soft-white: #FBFAF9;
  --eggshell:   #FAF9F7;
  --soft-grey:  #C1C3C5;
  --white:      #FFFFFF;

  /* Semantic colors — components should prefer these over brand tokens ----- */
  --color-bg:         var(--eggshell);
  --color-surface:    var(--white);
  --color-heading:    var(--denim);
  --color-text:       var(--midnight);
  --color-muted:      var(--slate);
  --color-link:       var(--ocean);
  --color-link-hover: var(--sky);

  /* color-mix() for border gives a single-token border that works on any bg */
  --color-border:     color-mix(in srgb, var(--midnight) 18%, transparent);

  --color-success:    var(--green);
  --color-warning:    var(--orange);
  --color-danger:     var(--red);

  /* Font stacks ----------------------------------------------------------- */
  --font-sans:  "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Noto Serif", Georgia, "Times New Roman", Times, serif;
  --font-mono:  "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Font weights ---------------------------------------------------------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Typography scale — desktop defaults; responsive overrides below ------- */
  --base-font-size:      16px;
  --fts-text-sm:         0.875rem; /* 14px */
  --fts-text-base:       1rem;     /* 16px */
  --fts-text-lg:         1.125rem; /* 18px */

  --fts-h1:              3rem;     /* 48px */
  --fts-h2:              2.375rem; /* 38px */
  --fts-h3:              1.75rem;  /* 28px */
  --fts-h4:              1.5rem;   /* 24px */
  --fts-h5:              1.25rem;  /* 20px */
  --fts-h6:              1rem;     /* 16px */

  --fts-leading-body:    1.5;
  --fts-leading-heading: 1.15;

  /* Spacing & layout ------------------------------------------------------ */
  --fts-container:    1400px;
  --fts-gutter:       48px;
  --fts-gutter-md:    32px;
  --fts-gutter-sm:    20px;
  --fts-stack:        20px;
  --fts-stack-sm:     10px;

  /* Max-width for a content column (~860px at 16px base).
     Named "column-max" not "reading" — at 120ch this is a layout constraint,
     not a prose reading measure (optimal prose is 60–75ch). */
  --fts-column-max:   120ch;

  /* Section vertical rhythm */
  --space-section:    64px;
  --space-section-md: 48px;
  --space-section-sm: 32px;

  /* Update per site to match the actual rendered header height */
  --fts-header-height: 80px;

  /* Radii & shadows ------------------------------------------------------- */
  --radius-0: 0px;
  --radius-1: 4px;
  --radius-2: 8px;

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.12);

  /* Button component tokens ----------------------------------------------- */
  --fts-btn-radius:      0px;
  --fts-btn-font-weight: 600;
  --fts-btn-line-height: 1.1;
  --fts-btn-pad-y:       10px;
  --fts-btn-pad-x:       40px;
  --fts-btn-border:      2px;
  --fts-btn-transition:  160ms;

  /* Accessibility tokens -------------------------------------------------- */
  --fts-focus-ring:          var(--sky);
  --fts-focus-width:         3px;
  --fts-focus-offset:        3px;
  --fts-focus-scroll-offset: 6rem;

  --fts-link-underline-thickness: 0.14em;
  --fts-link-underline-offset:    0.08em;
}

/* Responsive heading scale — matches BB breakpoints ----------------------- */
@media (max-width: 991.98px) {
  :root {
    --fts-h1: 2.75rem;
    --fts-h2: 2.25rem;
    --fts-h3: 1.5rem;
    --fts-h4: 1.375rem;
    --fts-h5: 1.125rem;
    --fts-h6: 1rem;
  }
}

@media (max-width: 767.98px) {
  :root {
    --fts-h1: 2.25rem;
    --fts-h2: 1.75rem;
    --fts-h3: 1.375rem;
    --fts-h4: 1.25rem;
    --fts-h5: 1.125rem;
    --fts-h6: 1rem;
  }
}