/* =============================================================
   ACCORD LABS — colors_and_type.css
   Foundational CSS variables for color, type, spacing, radii,
   shadows, glass, and motion. Import once at the top of a page:
     <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================= */

/* ---------- Fonts ---------- */
/* Editorial serif — displays, big moments */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&display=swap');
/* Neo-grotesque — UI and body */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&display=swap');
/* Mono — code, data, coordinates */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
/* Display — FogtwoNo5 (self-hosted) */
@font-face{
  font-family:'FogtwoNo5';
  src:url('assets/fonts/FogtwoNo5.woff2') format('woff2'),
      url('assets/fonts/FogtwoNo5.woff') format('woff');
  font-weight:normal;font-style:normal;font-display:swap;
}

:root {
  /* ============ COLOR — RAW ============ */
  /* Ink / paper (warm off-black + cool paper) */
  --ink-000: #05060A;   /* deepest */
  --ink-100: #0B0D14;
  --ink-200: #12151F;
  --ink-300: #1A1E2C;
  --ink-400: #2A2F42;
  --ink-500: #474D66;
  --ink-600: #7A8099;
  --ink-700: #B4B8CC;
  --ink-800: #DEE1EE;
  --ink-900: #F1F2F7;
  --paper:   #FAFAF6;   /* warm paper */
  --paper-2: #F3F1EA;   /* aged paper */

  /* Prismatic — the ACCORD spectrum. These read as a refracted
     ray of light: violet → indigo → azure → aqua → citrine → coral. */
  --prism-violet: #6B4BFF;   /* AI */
  --prism-indigo: #3E5BFF;
  --prism-azure:  #1E8BFF;   /* Science */
  --prism-aqua:   #2FD4C8;   /* Sustainability */
  --prism-citrine:#F2C14E;
  --prism-coral:  #FF6A5E;   /* Art */

  /* Signal colors for semantic use (muted, not saturated) */
  --sig-success: #3FB27F;
  --sig-warn:    #E8A13A;
  --sig-danger:  #D94B4B;
  --sig-info:    var(--prism-azure);

  /* ============ COLOR — SEMANTIC ============ */
  --bg:          var(--paper);
  --bg-elev:    #FFFFFF;
  --bg-sunk:    var(--paper-2);
  --bg-invert:  var(--ink-100);

  --fg:         var(--ink-100);
  --fg-muted:   var(--ink-500);
  --fg-subtle:  var(--ink-600);
  --fg-invert:  var(--ink-900);

  --stroke:     rgba(10, 12, 20, 0.10);
  --stroke-2:   rgba(10, 12, 20, 0.18);
  --stroke-hi:  rgba(10, 12, 20, 0.32);

  --accent:     var(--prism-violet);
  --accent-ink: #FFFFFF;

  /* ============ TYPE ============ */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-sans:    'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid scale — modular 1.25 */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: clamp(28px, 2.6vw, 32px);
  --fs-40: clamp(34px, 3.4vw, 44px);
  --fs-56: clamp(42px, 5vw, 64px);
  --fs-80: clamp(56px, 7.2vw, 96px);
  --fs-120: clamp(72px, 10vw, 140px);

  /* ============ SPACING ============ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ============ RADII ============ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ============ SHADOWS & GLASS ============ */
  /* Soft outer elevations — low-contrast, atmospheric */
  --sh-1: 0 1px 2px rgba(12, 14, 24, 0.06), 0 2px 6px rgba(12, 14, 24, 0.04);
  --sh-2: 0 2px 4px rgba(12, 14, 24, 0.06), 0 8px 24px rgba(12, 14, 24, 0.06);
  --sh-3: 0 4px 12px rgba(12, 14, 24, 0.08), 0 24px 60px rgba(12, 14, 24, 0.10);
  --sh-glow: 0 0 0 1px rgba(107, 75, 255, 0.18), 0 10px 40px rgba(107, 75, 255, 0.25);

  /* Inner highlight for glass panels */
  --glass-inner: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 0 0 1px rgba(255,255,255,0.20);
  --glass-inner-dark: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.06);

  --blur-1: 8px;
  --blur-2: 18px;
  --blur-3: 32px;

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* gentle deceleration */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-glass: cubic-bezier(0.2, 0.8, 0.2, 1);     /* liquid settle */
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 720ms;
}

/* =============================================================
   DARK SCHEME — invert paper/ink; prism stays saturated
   ============================================================= */
[data-theme="dark"] {
  --bg:         var(--ink-000);
  --bg-elev:    var(--ink-200);
  --bg-sunk:    var(--ink-100);
  --bg-invert:  var(--paper);

  --fg:         var(--ink-900);
  --fg-muted:   var(--ink-700);
  --fg-subtle:  var(--ink-600);
  --fg-invert:  var(--ink-100);

  --stroke:    rgba(255,255,255,0.08);
  --stroke-2:  rgba(255,255,255,0.14);
  --stroke-hi: rgba(255,255,255,0.28);

  --sh-1: 0 1px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
  --sh-2: 0 2px 4px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.4);
  --sh-3: 0 4px 12px rgba(0,0,0,0.5), 0 24px 60px rgba(0,0,0,0.5);
}

/* =============================================================
   SEMANTIC TYPE ROLES — use these classes on elements
   ============================================================= */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-120);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144;
  color: var(--fg);
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-80);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-56);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 96;
}

.t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 48;
}

.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.t-lede {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg-muted);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg);
}

.t-small {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-muted);
}

.t-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fg-subtle);
}

.t-code {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: 500;
  background: var(--bg-sunk);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xs);
  padding: 2px 6px;
}

.t-italic-serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* Utility */
.t-underline-thin { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* =============================================================
   BASE ELEMENTS (optional — use role classes in components)
   ============================================================= */
html { color-scheme: light dark; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 1em; }

/* =============================================================
   SIGNATURE MOTIFS — reusable utility classes
   ============================================================= */

/* Mesh gradient — the ACCORD prism */
.bg-prism-mesh {
  background-color: #F6F2FF;
  background-image:
    radial-gradient(at 12% 18%, rgba(107,75,255,0.55) 0px, transparent 45%),
    radial-gradient(at 82% 8%,  rgba(255,106,94,0.40) 0px, transparent 45%),
    radial-gradient(at 92% 70%, rgba(47,212,200,0.45) 0px, transparent 45%),
    radial-gradient(at 24% 88%, rgba(242,193,78,0.40) 0px, transparent 45%),
    radial-gradient(at 58% 52%, rgba(30,139,255,0.35) 0px, transparent 45%);
}

.bg-prism-mesh-dark {
  background-color: #0A0B14;
  background-image:
    radial-gradient(at 12% 18%, rgba(107,75,255,0.55) 0px, transparent 50%),
    radial-gradient(at 82% 12%, rgba(255,106,94,0.35) 0px, transparent 50%),
    radial-gradient(at 88% 78%, rgba(47,212,200,0.45) 0px, transparent 50%),
    radial-gradient(at 20% 82%, rgba(30,139,255,0.40) 0px, transparent 50%);
}

/* Liquid glass panel */
.glass {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(var(--blur-2)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: var(--sh-2), var(--glass-inner);
  border-radius: var(--r-lg);
}

.glass-dark {
  background: rgba(20,22,34,0.5);
  backdrop-filter: blur(var(--blur-2)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--sh-2), var(--glass-inner-dark);
  border-radius: var(--r-lg);
}

/* Prismatic text — use sparingly, for editorial moments */
.text-prism {
  background: linear-gradient(92deg, var(--prism-violet) 0%, var(--prism-azure) 34%, var(--prism-aqua) 58%, var(--prism-citrine) 78%, var(--prism-coral) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Grain overlay — ethereal texture */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.18;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Hairline rule */
.hairline { height: 1px; background: var(--stroke); border: 0; }