/* ============================================================ */
/*  SnapTrace - Design Tokens (single source of truth)          */
/*  Linked by every page via <link rel="stylesheet">.           */
/*  Structure & naming follow the Relume DESIGN.md / tokens.json */
/*  reference: --color-* / --font-* / --text-* / --leading-*    */
/*  / --tracking-* / --spacing-* / --radius-* / --shadow-*      */
/*  / --surface-*. Palette stays SnapTrace's navy/primary-accent brand.  */
/* ============================================================ */

:root {

  /* ------------------- Colors ------------------- */
  --color-navy:        #011a49;   /* brand primary: headings, nav, links */
  --color-navy-deep:   #011a49;   /* header / footer background */
  --color-primary-accent:       #0086fd;   /* brand accent: buttons, highlights */
  --color-primary-accent-soft:  #b3ddff;   /* tint: chips, hover washes, focus ring */

  --color-ink:         #011a49;   /* primary text */
  --color-graphite:    #1f2b45;   /* secondary text */
  --color-slate:       #31405f;   /* tertiary / muted content */
  --color-iron:        #4a597a;   /* mid-emphasis labels */
  --color-fog:         #6b7894;   /* helper text, meta */
  --color-sand:        #dbe3ee;   /* hairline borders, soft dividers */
  --color-cream:       #eef3f9;   /* page canvas */
  --color-paper:       #ffffff;   /* card surfaces, inputs */

  /* Brand gradient - navy to primary-accent (the only gradient in the system) */
  --gradient-brand: linear-gradient(90deg, #011a49, #0086fd);

  /* Semantic role aliases - edit one hex above to re-theme everywhere */
  --color-primary:   var(--color-navy);
  --color-accent:    var(--color-primary-accent);
  --color-bg:        var(--color-cream);
  --color-surface:   var(--color-paper);
  --color-border:    var(--color-sand);

  /* ------------------- Font families ------------------- */
  --font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;

  /* ------------------- Typography (per-level tracking) ------------------- */
  --text-caption:          12px;   --leading-caption:          1.5;
  --text-body-sm:          14px;   --leading-body-sm:          1.5;
  --text-body:             16px;   --leading-body:             1.5;
  --text-subheading:       18px;   --leading-subheading:       1.5;
  --text-heading-sm:       24px;   --leading-heading-sm:       1.35;  --tracking-heading:    -0.02em;
  --text-heading:          32px;   --leading-heading:          1.3;   --tracking-heading:    -0.02em;
  --text-heading-lg:       48px;   --leading-heading-lg:       1.2;   --tracking-heading-lg: -0.02em;
  --text-display:          56px;   --leading-display:          1.15;  --tracking-display:    -0.03em;
  --text-display-xl:       72px;   --leading-display-xl:       1.1;   --tracking-display-xl: -0.03em;
  --text-display-hero:    104px;   --leading-display-hero:     1.05;  --tracking-display-hero: -0.03em;

  /* ------------------- Spacing ------------------- */
  --spacing-unit:  4px;
  --spacing-4:     4px;  --spacing-8:     8px;  --spacing-12:   12px;
  --spacing-16:   16px;  --spacing-20:   20px;  --spacing-24:   24px;
  --spacing-32:   32px;  --spacing-36:   36px;  --spacing-40:   40px;
  --spacing-48:   48px;  --spacing-64:   64px;  --spacing-72:   72px;
  --spacing-80:   80px;  --spacing-112: 112px; --spacing-120: 120px;

  /* ------------------- Layout ------------------- */
  --page-max-width: 1200px;
  --section-gap: 64px;
  --card-padding: 20px;
  --element-gap: 8px;

  /* ------------------- Border radius ------------------- */
  --radius-default:  var(--radius-lg);
  --radius-lg:        8px;
  --radius-2xl:       16px;
  --radius-full:      999px;
  --radius-cards:     16px;
  --radius-pills:     999px;
  --radius-badges:    8px;
  --radius-inputs:    8px;
  --radius-buttons:   8px;

  /* ------------------- Shadows ------------------- */
  --shadow-subtle: 0 1px 3px rgba(22, 37, 70, .08), 0 1px 2px rgba(22, 37, 70, .05);
  --shadow-md:     0 8px 10px -4px rgba(22, 37, 70, .10), 0 2px 10px 2px rgba(22, 37, 70, .06);
  --shadow-focus:  0 0 0 3px rgba(0, 134, 253, .30);   /* primary-accent focus ring */

  /* ------------------- Surfaces ------------------- */
  --surface-canvas:   #eef3f9;   /* page background */
  --surface-card:     #ffffff;   /* card surfaces, inputs */
  --surface-elevated: #ffffff;   /* modals, elevated panels */
  --surface-tinted:   #b3ddff;   /* primary-accent-tinted interactive surfaces */
}