/* ─────────────────────────────────────────
   ALTWORK AI — Colors & Type Foundations
   Sourced from: src/styles/tokens.css + src/index.css + tailwind.config.ts
   Style: Glassmorphism Dark with Orange accent
───────────────────────────────────────── */

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

:root {
  /* ─── BRAND ACCENTS ─── */
  --accent:            #F97316; /* primary orange (HSL 22 82% 50%) */
  --accent-hover:      #ea6a0a;
  --accent-bg:         rgba(249, 115, 22, 0.07);
  --accent-secondary:  #8B5CF6; /* AI purple */
  --accent-tertiary:   #3B82F6; /* info blue */
  --brand-orange:      #FF5C00; /* logo orange (favicon/manifest) */

  /* ─── BACKGROUNDS (DARK = DEFAULT) ─── */
  --bg:           #060608;
  --bg-elevated:  #0a0a0a;
  --bg-card:      #141414; /* hsl(0 0% 8%) */
  --bg-muted:     #1f1f1f; /* hsl(0 0% 12%) */
  --bg-sidebar:   #0f0f0f; /* hsl(0 0% 6%) */

  /* ─── GLASSMORPHISM SURFACES ─── */
  --glass-bg:             rgba(255, 255, 255, 0.04);
  --glass-bg-md:          rgba(255, 255, 255, 0.065);
  --glass-bg-hover:       rgba(255, 255, 255, 0.085);
  --glass-surface-strong: rgba(255, 255, 255, 0.07);
  --glass-border:         rgba(255, 255, 255, 0.09);
  --glass-border-hover:   rgba(255, 255, 255, 0.16);
  --glass-border-orange:  rgba(249, 115, 22, 0.25);
  --glass-orange-bg:      rgba(249, 115, 22, 0.06);
  --glass-blur:           blur(20px);
  --glass-blur-lg:        blur(28px);

  /* ─── FOREGROUNDS ─── */
  --fg1:        #f0f0f0; /* headings */
  --fg2:        #b4b4b4; /* body */
  --fg3:        #888888; /* faint / labels */
  --fg-muted:   rgba(255, 255, 255, 0.55);
  --fg-faint:   rgba(255, 255, 255, 0.30);

  /* ─── SEMANTIC ─── */
  --success:    #22c55e; /* HSL 142 71% 45% */
  --warning:    #f59e0b; /* HSL 38 92% 50% */
  --destructive:#ef4444; /* HSL 0 84% 60% */
  --info:       #3B82F6;

  /* ─── BORDERS ─── */
  --border:        rgba(255, 255, 255, 0.09);
  --border-hover:  rgba(255, 255, 255, 0.16);
  --border-solid:  #1f1f1f;

  /* ─── SHADOWS ─── */
  --shadow-sm:    0 1px 2px 0 hsl(22 82% 50% / 0.05);
  --shadow-md:    0 4px 12px -2px hsl(22 82% 50% / 0.08);
  --shadow-lg:    0 8px 24px -4px hsl(22 82% 50% / 0.10);
  --shadow-xl:    0 16px 40px -8px hsl(22 82% 50% / 0.12);
  --shadow-glow:  0 0 40px -10px hsl(22 82% 50% / 0.30);
  --shadow-card:  0 8px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ─── GLOWS ─── */
  --glow-orange:  0 0 40px -6px rgba(249, 115, 22, 0.5), 0 4px 16px -4px rgba(249, 115, 22, 0.3);
  --glow-purple:  0 0 40px -8px rgba(139, 92, 246, 0.25);
  --glow-blue:    0 0 40px -8px rgba(59, 130, 246, 0.20);

  /* ─── MESH PALETTE (background washes) ─── */
  --mesh-orange:  rgba(249, 115, 22, 0.11);
  --mesh-purple:  rgba(139, 92, 246, 0.07);
  --mesh-blue:    rgba(59, 130, 246, 0.05);

  /* ─── RADII ─── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --radius-pill: 100px;

  /* ─── SPACING SCALE (Tailwind-aligned) ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ─── Z-INDEX ─── */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 20;
  --z-modal:   40;
  --z-nav:     50;

  /* ─── ANIMATION ─── */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --easing-smooth: cubic-bezier(0.22, 1, 0.36, 1);

  /* ─── TYPOGRAPHY FAMILIES ─── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  /* Note: src/styles/tokens.css references 'Geist' but src/index.css and
     tailwind.config.ts use Syne + DM Sans. The latter is what ships in the
     compiled product, so we adopt Syne (display) + DM Sans (body). */

  --line-height-body:  1.65;
  --line-height-tight: 1.08;

  /* ─── SEMANTIC TYPE TOKENS ─── */
  --h1-size:    clamp(34px, 5vw, 58px);
  --h1-weight:  700;
  --h1-tracking:-0.04em;
  --h1-leading: 1.05;

  --h2-size:    clamp(26px, 3.5vw, 44px);
  --h2-weight:  700;
  --h2-tracking:-0.02em;
  --h2-leading: 1.10;

  --h3-size:    20px;
  --h3-weight:  600;
  --h3-tracking:-0.01em;
  --h3-leading: 1.25;

  --body-size:  16px;
  --body-weight:400;
  --body-leading:1.65;

  --caption-size:12px;
  --caption-weight:500;
  --caption-tracking:0.07em;

  --code-size:  13px;
  --code-weight:400;
}

/* ─── LIGHT MODE OVERRIDES ─── */
[data-theme="light"] {
  --bg:           #f8f8f6;
  --bg-elevated:  #ffffff;
  --bg-card:      #ffffff;
  --bg-muted:     #ededed;
  --bg-sidebar:   #ffffff;

  --glass-bg:             rgba(255, 255, 255, 0.85);
  --glass-bg-md:          rgba(255, 255, 255, 0.90);
  --glass-bg-hover:       rgba(255, 255, 255, 0.95);
  --glass-border:         rgba(0, 0, 0, 0.08);
  --glass-border-hover:   rgba(0, 0, 0, 0.14);

  --fg1: #0a0a0a;
  --fg2: #444444;
  --fg3: #666666;

  --accent:        #E8620A;
  --accent-hover:  #d4570a;

  --border:        #e0e0e0;
  --border-hover:  #c8c8c8;
}

/* ─── BASE ELEMENT STYLES ─── */
html, body {
  background: var(--bg);
  color: var(--fg2);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading);
  color: var(--fg1);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
  color: var(--fg1);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
  color: var(--fg1);
}

p {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--line-height-body);
  color: var(--fg2);
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: var(--code-size);
}

.section-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.caption {
  font-size: var(--caption-size);
  font-weight: var(--caption-weight);
  letter-spacing: var(--caption-tracking);
  text-transform: uppercase;
  color: var(--fg3);
}

/* ─── GLASS CARD UTILITY ─── */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card);
}

/* ─── ORANGE GLOW CTA ─── */
.btn-glow {
  background: linear-gradient(135deg, #F97316, #ea6a0a);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 13px 24px;
  font-weight: 700;
  box-shadow: var(--glow-orange);
  border: none;
  cursor: pointer;
  transition: transform var(--duration-base) var(--easing-smooth),
              box-shadow var(--duration-base) var(--easing-smooth);
}
.btn-glow:hover { transform: translateY(-1px); }