/* ═══════════════════════════════════════════════════════════════
   Builtit AI — Design Tokens
   Single source of truth for all visual constants.
   Every page imports this file. No inline :root overrides.
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts ──────────────────────────────────────────────
   Load via <link> in each page:
   https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap
   ───────────────────────────────────────────────────────────── */

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Light Theme (Default) ─────────────────────────────────── */
:root{
  /* Backgrounds */
  --color-bg:            #FFFFFF;
  --color-bg-secondary:  #F8FAFC;
  --color-bg-tertiary:   #F1F5F9;
  --color-bg-well:       #E2E8F0;

  /* Surfaces (cards, panels, dropdowns) */
  --color-surface:       #FFFFFF;
  --color-surface-hover: #F8FAFC;
  --color-surface-active:#F1F5F9;

  /* Borders */
  --color-border:        #E2E8F0;
  --color-border-hover:  #CBD5E1;
  --color-border-focus:  #6C47FF;

  /* Text */
  --color-text:          #0F172A;
  --color-text-secondary:#475569;
  --color-text-muted:    #94A3B8;
  --color-text-inverse:  #FFFFFF;

  /* Accent (primary brand purple) */
  --color-accent:        #6C47FF;
  --color-accent-hover:  #5A35F0;
  --color-accent-light:  #F0ECFF;
  --color-accent-border: #C4B5FE;

  /* Secondary accent (cyan) */
  --color-accent2:       #00D4FF;
  --color-accent2-light: #E6FBFF;

  /* Accent soft (badge/pill text) */
  --color-accent-soft:   #A78BFF;

  /* Brand gradient */
  --gradient-brand:      linear-gradient(135deg, #6C47FF 0%, #00D4FF 100%);

  /* Semantic */
  --color-success:       #22C55E;
  --color-success-light: #F0FDF4;
  --color-success-border:#BBF7D0;
  --color-warning:       #F59E0B;
  --color-warning-light: #FFFBEB;
  --color-warning-border:#FDE68A;
  --color-error:         #EF4444;
  --color-error-light:   #FEF2F2;
  --color-error-border:  #FECACA;

  /* Purple (secondary accent — projects, studio) */
  --color-purple:        #7C3AED;
  --color-purple-light:  #F5F3FF;
  --color-purple-border: #DDD6FE;

  /* Typography */
  --font-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:             0.75rem;    /* 12px */
  --text-sm:             0.8125rem;  /* 13px */
  --text-base:           0.875rem;   /* 14px */
  --text-md:             0.9375rem;  /* 15px */
  --text-lg:             1.125rem;   /* 18px */
  --text-xl:             1.5rem;     /* 24px */
  --text-2xl:            2rem;       /* 32px — marketing only */

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

  --leading-tight:       1.3;
  --leading-normal:      1.5;
  --leading-relaxed:     1.6;

  /* Spacing (8px grid) */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* Border Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:   0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:   0 8px 24px rgba(0,0,0,.1),  0 2px 8px rgba(0,0,0,.04);
  --shadow-focus:0 0 0 3px rgba(108,71,255,.15);

  /* Layout */
  --topbar-h:    56px;
  --sidenav-w:   64px;
  --sidenav-open:220px;
  --content-max: 1200px;

  /* Transitions */
  --ease-default:  .15s ease;
  --ease-smooth:   .25s ease;
  --ease-spring:   .3s cubic-bezier(.4,0,.2,1);

  /* Z-index scale */
  --z-base:      1;
  --z-dropdown:  10;
  --z-sticky:    20;
  --z-overlay:   30;
  --z-modal:     40;
  --z-toast:     50;
  --z-topbar:    100;
}

/* ── Dark Theme ────────────────────────────────────────────── */
[data-theme="dark"]{
  --color-bg:            #09090F;
  --color-bg-secondary:  #0F1117;
  --color-bg-tertiary:   #161B24;
  --color-bg-well:       #1C2230;

  --color-surface:       #111118;
  --color-surface-hover: #191922;
  --color-surface-active:#1E1E2E;

  --color-border:        #1E1E2E;
  --color-border-hover:  #2A2A3E;
  --color-border-focus:  #6C47FF;

  --color-text:          #F1F5F9;
  --color-text-secondary:#94A3B8;
  --color-text-muted:    #475569;
  --color-text-inverse:  #0F172A;

  --color-accent-light:  rgba(108,71,255,.12);
  --color-accent-border: rgba(108,71,255,.3);

  --color-accent2-light: rgba(0,212,255,.12);

  --color-success-light: rgba(34,197,94,.12);
  --color-success-border:rgba(34,197,94,.25);
  --color-warning-light: rgba(245,158,11,.12);
  --color-warning-border:rgba(245,158,11,.25);
  --color-error-light:   rgba(239,68,68,.12);
  --color-error-border:  rgba(239,68,68,.25);

  --color-purple-light:  rgba(124,58,237,.12);
  --color-purple-border: rgba(124,58,237,.3);

  --shadow-xs:   0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:   0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:   0 4px 12px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.2);
  --shadow-lg:   0 8px 24px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  --shadow-focus:0 0 0 3px rgba(108,71,255,.3);
}

/* ── Base Styles ───────────────────────────────────────────── */
html{
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
  color:var(--color-text);
  background:var(--color-bg);
  min-height:100vh;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}

/* ── Selection ─────────────────────────────────────────────── */
::selection{background:var(--color-accent-light);color:var(--color-accent)}

/* ── Focus visible ─────────────────────────────────────────── */
:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeDown{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(100%)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slideRight{
  from{opacity:0;transform:translateX(-12px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.4}
}
@keyframes spin{
  to{transform:rotate(360deg)}
}
@keyframes shimmer{
  0%{background-position:-200% center}
  100%{background-position:200% center}
}

.fade-in{animation:fadeIn var(--ease-smooth) both}
.fade-up{animation:fadeUp .25s ease-out both}
.fade-up-1{animation-delay:.05s}
.fade-up-2{animation-delay:.1s}
.fade-up-3{animation-delay:.15s}
.fade-up-4{animation-delay:.2s}
.fade-up-5{animation-delay:.25s}

/* ── Utility classes ───────────────────────────────────────── */
.visually-hidden{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mono{font-family:var(--font-mono);font-size:var(--text-sm)}