/* tokens.css - Design Tokens for Neeladri Portfolio V2 */

@font-face {
  font-family: "Archivo Black";
  src: url("../assets/fonts/archivo-black.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "BiswasBrush";
  src: url("../assets/fonts/biswas-brush.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Surface and ink */
  --paper: #f4f1ea;
  --paper-light: #faf8f4;
  --paper-white: #ffffff;
  --paper-card: #ffffff;
  --paper-dark: #0f1013;
  --paper-dark-soft: #17181c;
  --ink: #111111;
  --ink-soft: #2e2e2e;
  --ink-light: #444444;
  --muted: #6e6e6e;
  --muted-light: #888888;
  --line: rgba(17, 17, 17, 0.12);
  --line-strong: rgba(17, 17, 17, 0.22);
  --line-dark: rgba(255, 255, 255, 0.12);

  /* Core Accents - Blue primary, rare yellow secondary */
  --blue: #1254f5;
  --blue-hover: #0c3ec4;
  --blue-glow: rgba(18, 84, 245, 0.35);
  --blue-soft: rgba(18, 84, 245, 0.08);
  --yellow: #ffe74f;
  --yellow-dark: #f0d524;
  --orange: #ff5f1f;
  --mint: #e2f4ed;

  /* Typography roles */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo Black", sans-serif;
  --font-biswas-brush: "BiswasBrush", sans-serif;
  --font-brush: "Permanent Marker", "Caveat", cursive;
  --font-hand: "Caveat", cursive;
  --font-mono: "Space Mono", "SF Mono", monospace;

  /* Spacing Scale */
  --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;

  /* Layout Boundaries */
  --max-width: 1480px;
  --site-padding: clamp(20px, 4.5vw, 64px);

  /* Borders & Shadows */
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 12px;
  --border-radius-pill: 9999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  --shadow-card-hover: 0 16px 36px rgba(0, 0, 0, 0.09), 0 4px 10px rgba(0, 0, 0, 0.03);
  --shadow-photo: 0 10px 28px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-sticky: 2px 10px 22px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 380ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layering System (Z-Index Bands) */
  --z-bg: 0;
  --z-texture: 2;
  --z-paper: 5;
  --z-paint: 10;
  --z-disciplines: 18;
  --z-photo-back: 20;
  --z-portrait: 30;
  --z-photo-front: 40;
  --z-note: 50;
  --z-doodle: 60;
  --z-ui: 100;

  /* Group Stacking Contexts */
  --z-group-portrait: 20;
  --z-group-pinboard: 30;
  --z-group-annotation: 40;
}