/* ==========================================================================
   THEME.CSS — DESIGN TOKENS & VARIABLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography & Webfonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Lexend';
  src: url('/fonts/Lexend-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CalSans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src:
    url("/fonts/CalSans-Regular.woff2") format("woff2-variations"),
    url("/fonts/CalSans-Regular.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   2. Design Tokens (:root) — Light Mode Default
   -------------------------------------------------------------------------- */
:root {
  /* ===== Typography ===================================================== */
  --font-body: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-heading: "CalSans", -apple-system, sans-serif;

  /* ===== Brand Core Colors ============================================== */
  --color-black: #161616;
  --color-white: #ffffff;
  --color-purple-primary: #a9a1e8;
  --color-purple-hover: #8d7ff7;
  --color-purple-dark: #8077c9;
  --color-purple-light: #f7f5ff;
  --color-purple-subtle: #f8f6ff;
  --color-purple-border: #9f95f8;
  --color-purple-accent: #6853ff;

  /* RGB triplets — enable rgba() composition from color tokens.
     Usage: rgba(var(--color-purple-primary-rgb), 0.16) */
  --color-purple-primary-rgb: 169, 161, 232;
  --color-purple-accent-rgb: 104, 83, 255;
  --color-purple-hover-rgb: 141, 127, 247;

  /* ===== Accent Tones =================================================== */
  --color-yellow: #f8d86e;
  --color-yellow-text: #141414;
  --color-green-accent: #afc170;
  --color-green-light: #e9fca7;
  --color-green-badge: #d0efe9;
  --color-green-badge-text: #285c52;

  --color-blue-badge: #d2e2ff;
  --color-blue-badge-text: #266ef1;
  --color-blue-focus: #0050bd;

  /* ===== Dark UI & Deep Stage Palette =================================== */
  --color-dark-deep: #121214;
  --color-dark-surface: #212121;
  --color-dark-elevated: #252526;
  --color-dark-card: #272628;
  --color-dark-border: #313032;
  --color-dark-input: #2e2e2e;
  --color-dark-hover: #32343a;
  --color-dark-active: #43464d;

  /* ===== Neutral & Text Tones =========================================== */
  --color-text-main: #161616;
  --color-text-muted: #5b5f62;
  --color-text-subtle: #898989;
  --color-text-light-muted: rgba(255, 255, 255, 0.69);

  /* ===== Backgrounds ==================================================== */
  --color-bg-page: #ffffff;
  --color-bg-subtle: #f7f6ff;
  --color-bg-input: #f4f4f4;
  --color-bg-alt: #f8f8f8;
  --color-bg-pill: #f4f3f2;

  /* ===== Borders ======================================================== */
  --color-border-subtle: #e0e0e0;
  --color-border-divider: #cecece;
  --color-border-input: #a2a1a2;

  /* ===== Component-Specific Semantic Tokens ============================= */
  --color-dash-bg: #e5e5ea;
  --color-slot-bg: #0b0d11;
  --color-node-bg: #212126;
  --color-node-hover: #2a2a34;
  --color-hub-start: #262630;
  --color-hub-end: #141418;
  --color-card-light-tint: #faf9ff;
  --color-slot-light-tint: #efedff;

  /* Contact Dock — Deep Purple Obsidian */
  --color-dock-bg: #131019;
  --color-dock-card-bg: rgba(19, 16, 25, 0.68);
  --color-dock-card-bg-hover: rgba(23, 19, 32, 0.78);

  /* Status Banner — Success */
  --color-status-success-bg: rgba(34, 197, 94, 0.08);
  --color-status-success-border: rgba(34, 197, 94, 0.3);
  --color-status-success-text: #15803d;

  /* Status Banner — Error */
  --color-status-error-bg: rgba(239, 68, 68, 0.06);
  --color-status-error-border: rgba(239, 68, 68, 0.28);
  --color-status-error-text: #b91c1c;

  /* ===== Border Radii =================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 22px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
  --radius-pill: 64px;

  /* ===== Border Weights ================================================= */
  /* Hairline rules + emphasis borders used across editorial surfaces. */
  --border-hairline: 1px;
  --border-thin: 1.5px;
  --border-thick: 2.5px;

  /* ===== Shadows ======================================================== */
  /* Soft (default system) */
  --shadow-nav: 0 2px 75px 16px rgba(225, 222, 242, 0.6);
  --shadow-floating: 8px 6px 30px rgba(214, 210, 244, 0.6);
  --shadow-mobile-menu: 0 8px 50px rgba(0, 0, 0, 0.05);
  --shadow-input-inset: inset 0 1px 2px rgba(0, 0, 0, 0.015);

  /* Editorial "hard offset" — flat Swiss-style drop, no blur. */
  --shadow-hard-sm: 5px 5px 0 var(--color-purple-accent);
  --shadow-hard-md: 7px 7px 0 var(--color-purple-accent);
  --shadow-hard-lg: 10px 10px 0 var(--color-purple-accent);

  /* ===== Layout Containers ============================================= */
  --container-max-width: 1200px;
  --container-narrow: 960px;
  --container-reading: 880px;
  --container-sm: 564px;

  /* ===== Transitions =================================================== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* ===== Shared Fluid Section Rhythm =================================== */
  --section-py: clamp(60px, 7vh + 20px, 110px);
  --section-px: clamp(18px, 4vw, 32px);
  --container-max: 1200px;
  --content-gap: clamp(36px, 5vw, 56px);
}

/* ==========================================================================
   DARK THEME TOKEN OVERRIDES
   ========================================================================== */
[data-theme="dark"] {
  /* Text */
  --color-text-main: #f4f4f6;
  --color-text-muted: #a1a1aa;
  --color-text-subtle: #71717a;

  /* Backgrounds */
  --color-bg-page: #0d0d10;
  --color-bg-subtle: #141417;
  --color-bg-input: #17171c;
  --color-bg-alt: #16161a;
  --color-bg-pill: #212126;

  /* Borders */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-divider: rgba(255, 255, 255, 0.12);
  --color-border-input: rgba(255, 255, 255, 0.2);

  /* Purple washes (dark-safe) */
  --color-purple-light: rgba(104, 83, 255, 0.14);
  --color-purple-subtle: rgba(169, 161, 232, 0.1);

  /* Component overrides */
  --color-dash-bg: #27272e;
  --color-card-dark-bg: rgba(22, 22, 27, 0.85);
  --color-card-grad-start: #19191e;
  --color-card-grad-end: #141417;
  --color-tag-dark-bg: rgba(25, 25, 31, 0.88);
  --color-pill-dark-bg: rgba(22, 22, 27, 0.88);

  /* Contact Dock */
  --color-dock-bg: #0c0a12;

  /* Status Banner */
  --color-status-success-bg: rgba(34, 197, 94, 0.1);
  --color-status-success-text: #86efac;

  --color-status-error-bg: rgba(239, 68, 68, 0.08);
  --color-status-error-text: #fca5a5;

  /* Dark-specific soft shadow */
  --shadow-input-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3);

  /* Editorial hard shadow — flips to the lighter purple in dark mode
     so the offset still reads against the near-black surface. */
  --shadow-hard-sm: 5px 5px 0 var(--color-purple-primary);
  --shadow-hard-md: 7px 7px 0 var(--color-purple-primary);
  --shadow-hard-lg: 10px 10px 0 var(--color-purple-primary);
}

/* ==========================================================================
   VIEW TRANSITIONS — circular clip fix
   ========================================================================== */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 9999;
}