/*
 * 4Ei Brand Tokens — LOCKED
 * =========================
 * Human Intelligence Amplified.
 *
 * Tier 1 palette is non-negotiable:
 *   Sapphire #0F52BA   Gold #D4AF37
 *   Crimson  #DC143C   Cream #F0EBE0
 *   Emerald  #046A38
 *
 * Typography:
 *   Display: Cinzel (italic) — section headers, system names
 *   Body:    Libre Franklin
 *   Mono:    JetBrains Mono — source paths, git SHAs
 *
 * Do not introduce new colors without amending this token set.
 */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Libre+Franklin:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* === Tier 1 palette === */
  --sapphire:        #0F52BA;
  --sapphire-deep:   #0A3A85;
  --sapphire-soft:   #E6EEFA;
  --gold:            #D4AF37;
  --gold-soft:       #FAF3DC;
  --crimson:         #DC143C;
  --crimson-soft:    #FBE3E8;
  --cream:           #F0EBE0;
  --cream-deep:      #E8E0CE;
  --emerald:         #046A38;
  --emerald-soft:    #DFF1E7;

  /* === Tier 2 (sacred & module rotation) === */
  --violet:          #7C3AED;
  --violet-soft:     #EDE4FB;
  --rose:            #E11D48;
  --teal:            #0EA5E9;

  /* === Neutrals === */
  --ink:             #1A1D24;
  --ink-2:           #3D434E;
  --ink-3:           #6B7280;
  --ink-4:           #9CA3AF;
  --line:            #E5E0D2;
  --line-strong:     #C9C2AE;
  --paper:           #FAF7EE;
  --paper-2:         #FFFFFF;

  /* === GRIP tones === */
  --grip-aligned:           var(--emerald);
  --grip-aligned-bg:        var(--emerald-soft);
  --grip-growth:            var(--gold);
  --grip-growth-bg:         var(--gold-soft);
  --grip-support:           var(--sapphire);
  --grip-support-bg:        var(--sapphire-soft);

  /* === Type === */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body:    'Libre Franklin', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;

  /* === Radii / shadows / spacing === */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  --sh-1: 0 1px 2px rgba(15,82,186,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --sh-2: 0 4px 12px rgba(15,82,186,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --sh-3: 0 12px 32px rgba(15,82,186,0.12), 0 4px 8px rgba(0,0,0,0.06);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* === Motion === */
  --t-fast: 120ms ease-out;
  --t-mid:  220ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 400ms cubic-bezier(.4, 0, .2, 1);
}

/* === Reset + base === */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--sapphire-deep);
  margin: 0;
}

a { color: var(--sapphire); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font-family: var(--font-body);
  cursor: pointer;
}

code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

/* === GRIP utility classes === */
.grip-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.grip-pill[data-grip="aligned"]            { color: var(--grip-aligned);  background: var(--grip-aligned-bg); }
.grip-pill[data-grip="growth_opportunity"] { color: var(--grip-growth);   background: var(--grip-growth-bg); }
.grip-pill[data-grip="needs_support"]      { color: var(--grip-support);  background: var(--grip-support-bg); }

/* === Sacred styling === */
.sacred-mark {
  color: var(--violet);
  font-weight: 600;
}
.sacred-card {
  border-left: 3px solid var(--violet);
  background: linear-gradient(180deg, var(--violet-soft) 0%, var(--paper-2) 60%);
}

/* === Focus rings (accessibility) === */
:focus-visible {
  outline: 2px solid var(--sapphire);
  outline-offset: 2px;
}