/* ==========================================================================
   FTS: tokens.css
   Purpose: Global design tokens (colors, typography, focus, underlines).
   
   Notes:
   - Define brand tokens first, then semantic tokens.
   - Avoid component styling here.
   ========================================================================== */

:root {

  /* --- Brand Color Tokens --- */
  --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;
  --soft-grey:  #C1C3C5;
  --white:      #FFFFFF;

  /* --- Semantic Tokens --- */
  /* NOTE: Prefer semantic tokens in CSS rules. Brand tokens should rarely be used directly. */
  --color-bg:          var(--soft-white);
  --color-surface:     var(--white);
  --color-text:        var(--midnight);
  --color-muted:       var(--slate);

  --color-link:        var(--ocean);
  --color-link-hover:  var(--denim);
  --color-focus:       var(--sky);

  --color-border:      color-mix(in srgb, var(--midnight) 18%, transparent);

  /* --- Typography Tokens --- */
  /* WARN: These variables are defined in fonts.css; do not redefine families here. */
  --base-font-size: 16px;

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

  /* --- Accessibility Tokens (A11y) --- */
  --fts-focus-ring: var(--color-focus);
  --fts-focus-width: 3px;
  --fts-focus-offset: 3px;
  --fts-focus-scroll-offset: 6rem;

  --fts-link-underline-thickness: 0.125em;
  --fts-link-underline-offset: 0.18em;
}