/* ============================================================
   GalimAI Design Tokens
   Import this into any HTML artifact:
   <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --mistral-orange:   #6b4ee6;   /* primary brand, GalimAI purple */
  --mistral-flame:    #8266f0;   /* lighter variant, hover */
  --block-orange:     #a890ff;   /* gradient mid */
  --brand-purple:     #6b4ee6;
  --brand-purple-dk:  #4a2fb8;
  --brand-purple-lt:  #b8a5ff;

  /* ---------- LAVENDER SCALE (re-mapped from sunshine for purple primary) ---------- */
  --sunshine-900:     #4a2fb8;
  --sunshine-700:     #b8a5ff;
  --sunshine-500:     #8266f0;
  --sunshine-300:     #d6c8ff;
  --block-gold:       #ede5ff;
  --bright-yellow:    #b8a5ff;

  /* ---------- SURFACES ---------- */
  --warm-ivory:       #fffaeb;   /* default page bg */
  --cream:            #fff0c2;   /* section / secondary surface */
  --pure-white:       #ffffff;
  --mistral-black:    #1f1f1f;

  /* ---------- TYPE ---------- */
  --fg-1:             #1f1f1f;   /* primary text */
  --fg-2:             #3d3d3d;   /* secondary */
  --fg-3:             #6b6356;   /* tertiary, warm-tinted */
  --fg-on-dark:       #ffffff;
  --fg-on-orange:     #ffffff;

  /* ---------- BORDERS / DIVIDERS ---------- */
  --border-warm:      #e7dfc8;   /* default card/divider */
  --border-strong:    #1f1f1f;   /* strong outline */
  --border-input:     hsl(240, 5.9%, 90%);  /* cool, only on form fields */

  /* ---------- ELEVATION (warm cascade) ---------- */
  --shadow-sm:  0 1px 2px rgba(127, 99, 21, 0.08);
  --shadow-md:  0 4px 12px rgba(127, 99, 21, 0.10), 0 1px 2px rgba(127, 99, 21, 0.06);
  --shadow-lg:  0 16px 40px rgba(127, 99, 21, 0.14), 0 4px 8px rgba(127, 99, 21, 0.08);
  --shadow-xl:  0 32px 80px rgba(127, 99, 21, 0.18), 0 8px 16px rgba(127, 99, 21, 0.10);

  /* ---------- GRADIENTS ---------- */
  --block-gradient: linear-gradient(135deg,
    #ede5ff 0%,
    #d6c8ff 18%,
    #b8a5ff 45%,
    #8266f0 70%,
    #6b4ee6 88%,
    #4a2fb8 100%);
  --block-gradient-vertical: linear-gradient(180deg,
    #b8a5ff 0%, #8266f0 50%, #4a2fb8 100%);
  --warm-wash: linear-gradient(180deg, rgba(255, 250, 235, 0) 0%, rgba(255, 240, 194, 0.6) 100%);

  /* ---------- RADII (near-zero) ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;

  /* ---------- SPACING (8px base) ---------- */
  --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;
  --space-11: 160px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --t-fast:   120ms;
  --t-med:    240ms;
  --t-slow:   480ms;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Anton', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display-xl: 96px;
  --fs-display-lg: 72px;
  --fs-display-md: 56px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  --lh-tight: 0.95;
  --lh-snug:  1.1;
  --lh-body:  1.5;
  --lh-loose: 1.7;

  --track-display: -0.035em;
  --track-h1:      -0.025em;
  --track-h2:      -0.02em;
  --track-body:    0;
  --track-eyebrow: 0.08em;
}

/* ============================================================
   SEMANTIC TYPE
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--warm-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.display-xl, .display-lg, .display-md, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400; /* Anton is single-weight */
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

.display-xl {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}
.display-lg {
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}
.display-md {
  font-size: var(--fs-display-md);
  line-height: var(--lh-snug);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--track-h1); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--track-h2); }
h3, .h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }
h4, .h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.005em; }

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); margin: 0; text-wrap: pretty; }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.55; }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-2);
}

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

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--t-fast) var(--ease-out);
}
a:hover { text-decoration-thickness: 2px; }