/**
 * Silicon Scripted — Brand Design Tokens
 * Domain: siliconscripted.dev
 * Last updated: 2026-03-27
 *
 * Usage:
 *   Import this file at the top of your stylesheet:
 *   @import url('./brand-tokens.css');
 *
 *   Then reference variables like:
 *   background: var(--color-bg-primary);
 *   color: var(--color-accent-green);
 */

:root {

  /* ─── Colors ─────────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --color-bg-primary:    #0D1117;   /* Page / darkest background */
  --color-bg-secondary:  #161B22;   /* Card / panel backgrounds  */
  --color-bg-tertiary:   #21262D;   /* Hover states, inputs       */
  --color-bg-overlay:    #2E3030;   /* Modals, overlays           */

  /* Accent — Terminal Green */
  --color-accent-green:        #41D45A;   /* Primary CTA, links, highlights */
  --color-accent-green-bright: #7FEE8F;   /* Hover / focus state            */
  --color-accent-green-dim:    #28823B;   /* Subtle tints, backgrounds      */
  --color-accent-green-muted:  rgba(65, 212, 90, 0.15); /* Transparent tint */

  /* Text */
  --color-text-primary:    #FFFFFF;   /* Headlines, primary body copy  */
  --color-text-secondary:  #8B949E;   /* Supporting text, captions     */
  --color-text-muted:      #6E7681;   /* Placeholders, disabled text   */
  --color-text-inverse:    #0D1117;   /* Text on light/green surfaces  */

  /* Borders */
  --color-border-default:  #30363D;   /* Cards, dividers               */
  --color-border-subtle:   #21262D;   /* Inner borders, separators     */
  --color-border-accent:   #41D45A;   /* Highlighted / active borders  */

  /* Status */
  --color-success: #41D45A;
  --color-warning: #E3B341;
  --color-error:   #F85149;
  --color-info:    #58A6FF;

  /* ─── Typography ─────────────────────────────────────────────────────────── */

  /* Font stacks */
  --font-sans:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
                'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code',
                'Courier New', monospace;

  /* Font sizes (fluid-friendly rem scale) */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-lg:    1.125rem;   /*  18px */
  --text-xl:    1.25rem;    /*  20px */
  --text-2xl:   1.5rem;     /*  24px */
  --text-3xl:   1.875rem;   /*  30px */
  --text-4xl:   2.25rem;    /*  36px */
  --text-5xl:   3rem;       /*  48px */

  /* Font weights */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  /* Line heights */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.1em;

  /* ─── Spacing ─────────────────────────────────────────────────────────────── */

  --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 */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ─── Border Radius ──────────────────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ─── Shadows ─────────────────────────────────────────────────────────────── */

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-green: 0 0 20px rgba(65, 212, 90, 0.25);

  /* ─── Transitions ────────────────────────────────────────────────────────── */

  --transition-fast:   100ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* ─── Z-index Scale ──────────────────────────────────────────────────────── */

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ─── Layout ──────────────────────────────────────────────────────────────── */

  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1536px;

}

/* ─── Utility Classes ──────────────────────────────────────────────────────── */

.ss-text-green   { color: var(--color-accent-green); }
.ss-text-white   { color: var(--color-text-primary); }
.ss-text-muted   { color: var(--color-text-secondary); }
.ss-bg-dark      { background-color: var(--color-bg-primary); }
.ss-bg-card      { background-color: var(--color-bg-secondary); }
.ss-border       { border: 1px solid var(--color-border-default); }
.ss-border-green { border: 1px solid var(--color-accent-green); }
.ss-font-mono    { font-family: var(--font-mono); }
.ss-font-sans    { font-family: var(--font-sans); }
.ss-shadow-green { box-shadow: var(--shadow-green); }

/* Terminal prompt prefix helper */
.ss-prompt::before {
  content: '> ';
  color: var(--color-accent-green);
  font-family: var(--font-mono);
}