/* ========================================================
   DESIGN TOKENS — NEO-BRUTALIST EDITORIAL PORTFOLIO
   Rishendra Ane — Pure Neo-Brutalist Design System
   High-Contrast, Hard-Shadow, Editorial Geometry
   ======================================================== */

:root {
  /* === COLOR PALETTE (NEO-BRUTALIST CORE) === */
  --color-paper: #F5F0E8;       /* Primary warm editorial paper surface */
  --color-paper-light: #FAF7F2; /* Elevated paper surface */
  --color-paper-dark: #ECE5D8;  /* Deep paper accent */
  --color-ink: #111111;         /* Deepest black ink for borders/text/shadows */
  --color-ink-soft: #262626;    /* Secondary ink */
  --color-ink-muted: #555555;   /* Supporting editorial text */
  --color-white: #FFFFFF;       /* Pure white block contrast */

  /* Neo-Brutalist Expressive Accents */
  --color-lime: #C8FF00;        /* Acid Lime */
  --color-cobalt: #3457F1;      /* Electric Cobalt */
  --color-vermilion: #FF5738;   /* Vermilion / Flame */
  --color-yellow: #FFE600;      /* Warning yellow */
  --color-purple: #B6A0FF;      /* Editorial lavender */

  /* Surface Mappings (Default: Editorial Paper) */
  --bg-primary: var(--color-paper);
  --bg-secondary: var(--color-white);
  --bg-tertiary: var(--color-paper-light);
  --bg-card: var(--color-white);
  --bg-card-alt: var(--color-paper-dark);
  --bg-dark: var(--color-ink);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-muted);
  --text-tertiary: #777777;
  --text-inverse: var(--color-paper);
  --text-white: #FFFFFF;

  /* === NEO-BRUTALIST BORDERS === */
  --border-width: 2.5px;
  --border-width-thick: 3.5px;
  --border-brutal: 2.5px solid var(--color-ink);
  --border-thick: 3.5px solid var(--color-ink);
  --border-dashed: 2px dashed var(--color-ink);
  --border-white: 2.5px solid #FFFFFF;
  --border-lime: 2.5px solid var(--color-lime);

  /* === NEO-BRUTALIST HARD SHADOWS (ZERO BLUR) === */
  --shadow-none: none;
  --shadow-xs: 2px 2px 0 var(--color-ink);
  --shadow-sm: 4px 4px 0 var(--color-ink);
  --shadow-md: 6px 6px 0 var(--color-ink);
  --shadow-lg: 10px 10px 0 var(--color-ink);
  --shadow-xl: 14px 14px 0 var(--color-ink);

  /* Colored Hard Shadows */
  --shadow-lime: 6px 6px 0 var(--color-lime);
  --shadow-vermilion: 6px 6px 0 var(--color-vermilion);
  --shadow-cobalt: 6px 6px 0 var(--color-cobalt);
  --shadow-white: 6px 6px 0 #FFFFFF;

  /* === TYPOGRAPHY === */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Fluid Type Scale */
  --text-hero: clamp(2.75rem, 6.5vw, 6.25rem);
  --text-display: clamp(2rem, 4.5vw, 4rem);
  --text-heading: clamp(1.5rem, 2.8vw, 2.5rem);
  --text-subhead: clamp(1.15rem, 1.8vw, 1.6rem);
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;
  --text-nano: 0.6875rem;

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

  --leading-none: 0.95;
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;

  /* Spacing System */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Container */
  --container-max: 1360px;
  --container-wide: 1440px;
  --container-narrow: 920px;
  --nav-height: 72px;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.2, 0, 0, 1);
  --transition-normal: 0.25s cubic-bezier(0.2, 0, 0, 1);
  --transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === DARK THEME SUPPORT (NEO-BRUTALIST INK) === */
[data-theme="dark"] {
  /* Surface colors in Dark Mode */
  --color-paper: #121212;         /* Main canvas background becomes deep charcoal/black */
  --color-paper-light: #1A1A1A;   /* Elevated sections become dark charcoal */
  --color-paper-dark: #0A0A0A;    /* Darkest paper becomes pitch black */
  --color-white: #1C1C1C;         /* White cards become dark neo-brutalist cards! */

  /* Ink / Text colors in Dark Mode */
  --color-ink: #F5F0E8;           /* Ink becomes crisp paper white! */
  --color-ink-soft: #E8E4DA;      /* Secondary text becomes crisp high-contrast light cream */
  --color-ink-muted: #C0BCB2;     /* Muted text becomes clearly legible medium cream */
  --color-on-lime: #111111;       /* Guaranteed high contrast on lime in both themes */

  /* Surface Mappings */
  --bg-primary: #121212;
  --bg-secondary: #1C1C1C;
  --bg-tertiary: #252525;
  --bg-card: #1C1C1C;
  --bg-card-alt: #181818;
  --bg-dark: #0A0A0A;

  --text-primary: #F5F0E8;
  --text-secondary: #D5D0C8;
  --text-tertiary: #9E9B93;
  --text-inverse: #111111;
  --text-white: #FFFFFF;

  /* Borders in Dark Mode */
  --border-brutal: 2.5px solid #F5F0E8;
  --border-thick: 3.5px solid #F5F0E8;
  --border-dashed: 2px dashed #F5F0E8;
  --border-white: 2.5px solid #F5F0E8;

  /* Hard Shadows in Dark Mode */
  --shadow-none: none;
  --shadow-xs: 2px 2px 0 #F5F0E8;
  --shadow-sm: 4px 4px 0 #F5F0E8;
  --shadow-md: 6px 6px 0 #F5F0E8;
  --shadow-lg: 10px 10px 0 #F5F0E8;
  --shadow-xl: 14px 14px 0 #F5F0E8;

  --shadow-lime: 6px 6px 0 var(--color-lime);
  --shadow-vermilion: 6px 6px 0 var(--color-vermilion);
  --shadow-cobalt: 6px 6px 0 var(--color-cobalt);
  --shadow-white: 6px 6px 0 #F5F0E8;
}