/* ============================================================
   Ayotta ISMS & QMS Hub — Design tokens
   Matched to the ayotta-platform-* family (Direction C palette):
   orange accent + deep navy + warm cream surfaces + Geist type.
   Loaded BEFORE styles.css so legacy --navy/--amber/--ice etc. auto-map.
   ============================================================ */
:root {
  /* Brand — orange */
  --orange:        #E0612A;
  --orange-dark:   #B84A1C;
  --orange-bright: #F47A48;
  --orange-soft:   #FFF1E8;

  /* Navy (deep ink) */
  --navy:          #0E1B33;
  --navy-deep:     #08111F;
  --navy-soft:     #1B2A44;

  /* Surfaces */
  --paper:         #FFFFFF;
  --warm:          #FAF7F2;
  --warm-2:        #F3EDE2;

  /* Lines */
  --line:          rgba(14, 27, 51, 0.10);
  --line-soft:     rgba(14, 27, 51, 0.06);
  --line-on-dark:  rgba(255,255,255,0.10);
  --line-on-orange:rgba(255,255,255,0.22);

  /* Text */
  --text:               #0E1B33;
  --text-dim:           rgba(14, 27, 51, 0.66);
  --text-faint:         rgba(14, 27, 51, 0.40);
  --text-on-navy:       #F4ECDE;
  --text-on-navy-dim:   rgba(244,236,222,0.66);
  --text-on-orange:     #FFF8F2;
  --text-on-orange-dim: rgba(255,248,242,0.78);

  /* Status (kept distinct from accent so they read as STATE, not brand) */
  --status-green:    #1E7B47;
  --status-green-50: #E5F5EB;
  --status-amber:    #B97A0F;
  --status-amber-50: #FDF1DE;
  --status-red:      #C0392B;
  --status-red-50:   #FBE9E7;

  /* Neutrals (kept for register tables / dense data — but used sparingly) */
  --n-0:   #FFFFFF;
  --n-50:  #FAF7F2;
  --n-100: #F3EDE2;
  --n-150: #E8E1D2;
  --n-200: #D5CFC0;
  --n-300: #B6BEC9;
  --n-400: rgba(14,27,51,0.40);
  --n-500: rgba(14,27,51,0.55);
  --n-600: rgba(14,27,51,0.72);
  --n-700: rgba(14,27,51,0.85);
  --n-800: var(--text);
  --n-900: #08111F;

  /* Radii — platform uses big rounded shapes */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 100px;   /* buttons + pills are full-round on the platform */

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(14, 27, 51, 0.04);
  --shadow-sm: 0 1px 3px rgba(14, 27, 51, 0.06), 0 1px 2px rgba(14, 27, 51, 0.04);
  --shadow-md: 0 8px 24px rgba(14, 27, 51, 0.08);
  --shadow-lg: 0 16px 40px rgba(14, 27, 51, 0.12);

  /* Typography */
  --font:      "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Legacy v1 token re-maps so old CSS reading --navy / --ice / --amber etc.
     auto-re-skins without source edits. Removing later once everything is verified. */
  --ice:         var(--line);
  --ice-pale:    var(--warm-2);
  --amber:       var(--orange);
  --amber-soft:  var(--orange-soft);
  --green:       var(--status-green);
  --green-pale:  var(--status-green-50);
  --red:         var(--status-red);
  --red-pale:    var(--status-red-50);
  --muted:       var(--text-dim);
  --bg:          var(--warm);
  --shadow:      var(--shadow-md);

  /* Safran-* aliases (used by some v2.css rules I authored earlier) — re-map to orange/navy */
  --safran-navy:     var(--navy);
  --safran-navy-50:  var(--orange-soft);
  --safran-navy-700: var(--navy-soft);
  --safran-blue:     var(--orange);
  --safran-blue-50:  var(--orange-soft);
  --safran-blue-600: var(--orange-dark);
  --safran-teal-50:  var(--warm-2);
}

/* Geist + JetBrains Mono across the Hub */
html, body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  background: var(--warm);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

/* Mono utility — used for eyebrows, section labels, meta */
.mono, .eyebrow, .sb-section-title, .sop-section h3, .card .lab, .stat-label, .docs-cadence {
  font-family: var(--font-mono);
}