/* =============================================================
   QALLORA TRENDS — built on the 030 Group Design System
   Dark-first · indigo accent · Sora (Oriole stand-in) · Manrope
   (Gilroy stand-in) · JetBrains Mono. No warm tones. No emoji.
   Token VALUES are lifted verbatim from 030's colors_and_type.css.
   ============================================================= */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---- Base palette (institutional darks, no warm tones) ---- */
  --color-obsidian:  #07070F;
  --color-midnight:  #0B0B14;
  --color-navy-deep: #141331;
  --color-navy:      #1A1A3E;
  --color-navy-soft: #232352;

  /* ---- The single accent: electric indigo → lavender ---- */
  --color-indigo:        #5357FF;
  --color-indigo-hover:  #4A4DE8;
  --color-indigo-press:  #3F42CC;
  --color-violet:        #8481EF;
  --color-lavender:      #B8AEDD;
  --color-lavender-dim:  #8C84B5;

  /* ---- Light side (rare) ---- */
  --color-paper: #FFFFFF;
  --color-bone:  #F7F7FB;
  --color-ash:   #E6E6EF;
  --color-ink-1: #07070F;
  --color-ink-2: #2A2A3E;
  --color-ink-3: #6A6A82;

  /* ---- Text on dark ---- */
  --on-dark-100: rgba(255,255,255,1);
  --on-dark-72:  rgba(255,255,255,0.72);
  --on-dark-48:  rgba(255,255,255,0.48);
  --on-dark-20:  rgba(255,255,255,0.20);
  --on-dark-12:  rgba(255,255,255,0.12);
  --on-dark-06:  rgba(255,255,255,0.06);

  /* ---- Hairlines, not borders ---- */
  --hairline-light: rgba(255,255,255,0.20);
  --hairline-dim:   rgba(255,255,255,0.12);
  --hairline-faint: rgba(255,255,255,0.06);

  /* ---- Semantic ---- */
  --color-success: #2EC4A1;
  --color-warning: #F0B45A;
  --color-danger:  #E05A6F;

  /* ---- Gradients ---- */
  --gradient-mark: linear-gradient(90deg, #5357FF 0%, #696AF8 17%, #8481EF 39%, #A9A1E2 91%, #B8AEDD 100%);
  --gradient-mark-vertical: linear-gradient(180deg, #5357FF 0%, #696AF8 17%, #8481EF 39%, #A9A1E2 91%, #B8AEDD 100%);
  --gradient-hero-glow: radial-gradient(ellipse 90% 60% at 50% 110%, rgba(83,87,255,0.22) 0%, rgba(83,87,255,0.08) 35%, transparent 70%);
  --gradient-corner-wash: radial-gradient(ellipse 50% 80% at 100% 0%, rgba(132,129,239,0.28) 0%, rgba(132,129,239,0.06) 40%, transparent 70%);

  /* ---- Type families ---- */
  --font-display:   "Sora", system-ui, sans-serif;
  --font-sans:      "Manrope", system-ui, sans-serif;
  --font-statement: "Sora", system-ui, sans-serif;
  --font-wordmark:  "Manrope", system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, monospace;

  /* ---- Tracking / leading ---- */
  --tr-tight-hero:    -0.025em;
  --tr-tight-display: -0.020em;
  --tr-eyebrow:        0.14em;
  --tr-wordmark:      -0.02em;
  --lh-hero: 1.00; --lh-display: 1.05; --lh-tight: 1.20; --lh-body: 1.50; --lh-prose: 1.65;

  /* ---- Spacing ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --max-content: 1240px;
  --max-prose: 68ch;

  /* ---- Radii ---- */
  --radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:20px; --radius-pill:999px; --radius-ticket:28px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(7,7,15,0.06);
  --shadow-md: 0 4px 12px rgba(7,7,15,0.10);
  --shadow-lg: 0 12px 32px rgba(7,7,15,0.18);
  --shadow-xl: 0 24px 64px rgba(7,7,15,0.24);
  --shadow-inset:        inset 0 0 0 1px var(--hairline-faint);
  --shadow-inset-strong: inset 0 0 0 1px var(--hairline-dim);
  --shadow-glow:      0 0 0 1px rgba(83,87,255,0.40), 0 8px 28px rgba(83,87,255,0.28);
  --shadow-glow-soft: 0 0 0 1px rgba(83,87,255,0.24), 0 4px 18px rgba(83,87,255,0.16);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2,0.8,0.2,1);
  --ease-in:  cubic-bezier(0.4,0,0.6,1);
  --dur-fast:120ms; --dur-base:220ms; --dur-slow:360ms;

  /* ---- Light surfaces (bright near-white, cool) ---- */
  --bg-ivory:    #F2F4FC;   /* page base */
  --bg-ivory-2:  #E9ECF8;   /* alt band */
  --surface:     #FFFFFF;   /* card */
  --surface-2:   #F6F8FE;   /* soft card */

  /* ---- Ink on light ---- */
  --ink-1: #14132E;
  --ink-2: #45435F;
  /* ink-3/ink-4 darkened for WCAG AA: old #6F6C85/#9A97AC failed (3.2–4.4:1)
     on the page's light bands (#E9ECF8/#F2F4FC). These clear 4.5:1 everywhere. */
  --ink-3: #54526B;
  --ink-4: #635F79;

  /* ---- Indigo tuned for light backgrounds ---- */
  --indigo-on-light: #4F45D6;
  /* darkened from #6B5BD8 → clears 4.5:1 for violet accent text on light bands */
  --violet-on-light: #5946C4;

  /* ---- Light hairlines (dark-on-light) ---- */
  --line:       rgba(20,19,46,0.12);
  --line-2:     rgba(20,19,46,0.18);
  --line-faint: rgba(20,19,46,0.07);

  /* ---- Semantic roles → LIGHT ---- */
  --bg-page: var(--bg-ivory);
  --bg-hero: var(--bg-ivory);
  --bg-card: var(--surface);
  --fg-1: var(--ink-1);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
}