/* ==========================================================================
  FTS: tokens.css
  Purpose: Global design tokens (colors, typography, spacing, focus).
  Notes:
  - Brand tokens first, then semantic tokens.
  - Components should prefer semantic tokens.
  ========================================================================== */


: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 --- */
  /* --color-bg:          var(--soft-white); */
  --color-bg:          #FAF9F7;
  --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-border:      color-mix(in srgb, var(--midnight) 18%, transparent);

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

  /* --- Typography Tokens --- */
  --base-font-size: 16px;

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

  /* --- Radii and Shadows (neutral defaults) --- */
  --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);

  /* --- 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;

  /* --- 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;
}