/* ============================================================
   SHAGAL AI — Colors & Type Foundations
   Bold & techy · mono-accented · airy & rounded · light + dark
   ============================================================
   Load order:
     1. This file (defines tokens on :root and [data-theme="dark"])
     2. Your component styles (consume var(--…) tokens)
   Fonts are pulled from Google Fonts. If you need offline/self-hosted,
   drop the .woff2 files in /fonts and swap the @import for @font-face.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ---------- 1. PRIMITIVE TOKENS (raw values, theme-agnostic) ---------- */
:root {
  /* Brand — Gold (rich, bold) */
  --gold-50:  #FDF6E0;
  --gold-100: #FAEAB5;
  --gold-200: #F4D976;
  --gold-300: #EDC53E;
  --gold-400: #E5AF13;
  --gold-500: #D89B00; /* ← primary brand accent */
  --gold-600: #B57F00;
  --gold-700: #8C6203;
  --gold-800: #694A06;
  --gold-900: #4E3707;

  /* Neutral — cool graphite */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAFA;
  --neutral-100: #F4F4F5;
  --neutral-150: #ECECEE;
  --neutral-200: #E4E4E7;
  --neutral-300: #D4D4D8;
  --neutral-400: #A1A1AA;
  --neutral-500: #71717A;
  --neutral-600: #52525B;
  --neutral-700: #3F3F46;
  --neutral-800: #27272A;
  --neutral-850: #1C1C20;
  --neutral-900: #131316;
  --neutral-950: #0B0B0F;

  /* Semantic hues (shared light/dark, brightened in dark via mix) */
  --green-500:  #1F9D55;
  --green-50:   #E7F6EE;
  --amber-500:  #E8821E;
  --amber-50:   #FBEBDA;
  --red-500:    #E5484D;
  --red-50:     #FCEBEC;
  --blue-500:   #3B82F6;
  --blue-50:    #E8F0FE;

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: 'IBM Plex Sans Arabic', 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* ---------- TYPE SCALE (fluid-ish, rem) ---------- */
  --text-2xs: 0.6875rem;  /* 11px — mono micro-labels */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-md:  1rem;       /* 16px — base body */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.375rem;   /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 4rem;       /* 64px */
  --text-6xl: 5.5rem;     /* 88px — hero display */

  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.02em; /* mono labels */
  --tracking-caps:   0.12em; /* uppercase mono eyebrows */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- SPACING (4px base, airy) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- RADII (rounded, friendly) ---------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;  /* default control/card */
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* ---------- 2. SEMANTIC TOKENS — LIGHT (default) ---------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg:            var(--neutral-50);   /* app canvas */
  --bg-subtle:     var(--neutral-100);  /* recessed areas */
  --surface:       var(--neutral-0);    /* cards, panels */
  --surface-2:     var(--neutral-50);   /* nested surface */
  --surface-inset: var(--neutral-100);  /* inputs, wells */
  --surface-hover: var(--neutral-100);

  /* Text */
  --fg1: var(--neutral-900); /* primary text / headings */
  --fg2: var(--neutral-600); /* secondary / body */
  --fg3: var(--neutral-500); /* muted / captions */
  --fg4: var(--neutral-400); /* placeholder / disabled */
  --fg-on-accent: #231A02; /* dark ink — gold is light, so text on accent is dark */

  /* Lines */
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-subtle: var(--neutral-150);
  --ring:          var(--gold-500);

  /* Brand */
  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-600);
  --accent-press:  var(--gold-700);
  --accent-soft:   var(--gold-50);
  --accent-fg:     var(--gold-700); /* accent-colored text on light bg */

  /* Bubbles (chat) */
  --bubble-user:    var(--gold-500);
  --bubble-user-fg: #231A02;
  --bubble-ai:      var(--neutral-100);
  --bubble-ai-fg:   var(--neutral-900);

  /* Semantic */
  --success: var(--green-500); --success-soft: var(--green-50);
  --warning: var(--amber-500); --warning-soft: var(--amber-50);
  --danger:  var(--red-500);   --danger-soft:  var(--red-50);
  --info:    var(--blue-500);  --info-soft:    var(--blue-50);

  /* Elevation — soft, low-contrast, airy */
  --shadow-xs: 0 1px 2px rgba(15, 15, 20, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 15, 20, 0.07);
  --shadow-md: 0 6px 20px rgba(15, 15, 20, 0.09);
  --shadow-lg: 0 16px 44px rgba(15, 15, 20, 0.12);
  --shadow-accent: 0 8px 24px rgba(216, 155, 0, 0.32);
}

/* ---------- 3. SEMANTIC TOKENS — DARK ---------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--neutral-950);
  --bg-subtle:     var(--neutral-900);
  --surface:       var(--neutral-900);
  --surface-2:     var(--neutral-850);
  --surface-inset: #1A1A1F;
  --surface-hover: var(--neutral-850);

  --fg1: #F7F7F8;
  --fg2: var(--neutral-400);
  --fg3: var(--neutral-500);
  --fg4: var(--neutral-600);
  --fg-on-accent: #231A02;

  --border:        #2A2A30;
  --border-strong: #3A3A42;
  --border-subtle: #1F1F24;
  --ring:          var(--gold-400);

  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-400);
  --accent-press:  var(--gold-300);
  --accent-soft:   rgba(216, 155, 0, 0.16);
  --accent-fg:     var(--gold-300);

  --bubble-user:    var(--gold-500);
  --bubble-user-fg: #231A02;
  --bubble-ai:      var(--neutral-850);
  --bubble-ai-fg:   #F7F7F8;

  --success: #34C97A; --success-soft: rgba(31,157,85,0.16);
  --warning: #F2A24D; --warning-soft: rgba(232,130,30,0.18);
  --danger:  #FF6166; --danger-soft:  rgba(229,72,77,0.16);
  --info:    #5C9CFF; --info-soft:    rgba(59,130,246,0.16);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.65);
  --shadow-accent: 0 8px 28px rgba(216, 155, 0, 0.42);
}

/* ============================================================
   4. SEMANTIC TYPE CLASSES (opinionated, ready to use)
   ============================================================ */
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

.display {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
.h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
.h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.body-lg {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
}
.body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.body-sm {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.caption {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg3);
}
/* Mono is the brand's technical accent — labels, metadata, eyebrows, code */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-fg);
}
.label-mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--fg3);
}
.code {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg1);
}

/* Base reset hooks (optional convenience) */
.shagal-base {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}