/* ==========================================================================
   DESIGN TOKENS & SYSTEM VARIABLES
   Portfolio: Aylin Aslı Altınkılıç (Interaction Designer & UI Engineer)
   Aesthetic: Dark Modern Cyber-Grunge / Engineered & Tactical
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. COLOR PALETTE
     ------------------------------------------------------------------------ */
  /* Base & Canvas */
  --color-bg-base: #09090B;        /* Deep Void Black */
  --color-bg-subtle: #121215;      /* Subtle depth background */
  --color-bg-surface: #18181B;     /* Component & card surface */
  --color-bg-elevated: #202025;    /* Hover & modal surface */
  --color-bg-skeleton: #1c1c21;    /* Skeleton placeholder base */

  /* Text & Foreground */
  --color-text-primary: #FAFAFA;   /* Off-white readable contrast */
  --color-text-secondary: #A1A1AA; /* Zinc-400 for descriptions & body */
  --color-text-muted: #71717A;     /* Zinc-500 for technical captions */
  --color-text-inverse: #09090B;   /* Deep black for inverted hover states */

  /* Accent 1: Cyber Pink (Primary Action / High Energy Highlight) */
  --color-accent-pink: #F472B6;
  --color-accent-pink-dark: #DB2777;
  --color-accent-pink-glow: rgba(244, 114, 182, 0.22);
  --color-accent-pink-subtle: rgba(244, 114, 182, 0.08);

  /* Accent 2: Cool Purple (Secondary Action / Monospaced Data Structural) */
  --color-accent-purple: #A78BFA;
  --color-accent-purple-dark: #7C3AED;
  --color-accent-purple-glow: rgba(167, 139, 250, 0.22);
  --color-accent-purple-subtle: rgba(167, 139, 250, 0.08);

  /* Functional Status Accents */
  --color-status-online: #34D399;  /* Emerald */
  --color-status-glow: rgba(52, 211, 153, 0.35);

  /* Cyber Borders & Micro-Lines */
  --border-subtle: 1px solid rgba(255, 255, 255, 0.08);
  --border-cyber: 1px solid rgba(255, 255, 255, 0.15);
  --border-cyber-bold: 1px solid rgba(255, 255, 255, 0.25);
  --border-accent-pink: 1px solid var(--color-accent-pink);
  --border-accent-purple: 1px solid var(--color-accent-purple);

  /* ------------------------------------------------------------------------
     2. TYPOGRAPHY SYSTEM
     ------------------------------------------------------------------------ */
  /* Type Families */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Fluid Typography Scale (clamp based on viewport 360px -> 1440px) */
  --font-size-2xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);   /* 11px - 12px */
  --font-size-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem);    /* 12px - 13px */
  --font-size-sm: clamp(0.8125rem, 0.77rem + 0.22vw, 0.875rem);   /* 13px - 14px */
  --font-size-base: clamp(0.9375rem, 0.89rem + 0.24vw, 1.0625rem);/* 15px - 17px */
  --font-size-md: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);     /* 17px - 20px */
  --font-size-lg: clamp(1.25rem, 1.12rem + 0.65vw, 1.625rem);     /* 20px - 26px */
  --font-size-xl: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem);       /* 26px - 36px */
  --font-size-2xl: clamp(2.125rem, 1.75rem + 1.85vw, 3.25rem);    /* 34px - 52px */
  --font-size-3xl: clamp(2.75rem, 2.1rem + 3.2vw, 4.75rem);       /* 44px - 76px */

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.75;

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-mono: 0.08em;

  /* ------------------------------------------------------------------------
     3. FLUID SPACING SCALE
     ------------------------------------------------------------------------ */
  --space-3xs: clamp(0.125rem, 0.1rem + 0.1vw, 0.25rem);   /* 2px - 4px */
  --space-2xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);     /* 4px - 8px */
  --space-xs: clamp(0.5rem, 0.42rem + 0.35vw, 0.75rem);    /* 8px - 12px */
  --space-sm: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);       /* 12px - 16px */
  --space-md: clamp(1rem, 0.85rem + 0.75vw, 1.5rem);       /* 16px - 24px */
  --space-lg: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);     /* 24px - 36px */
  --space-xl: clamp(2rem, 1.5rem + 2vw, 3.5rem);           /* 32px - 56px */
  --space-2xl: clamp(3rem, 2.25rem + 3.5vw, 5.5rem);       /* 48px - 88px */
  --space-3xl: clamp(4.5rem, 3.2rem + 5.5vw, 8.5rem);      /* 72px - 136px */

  /* Layout Container Constraints */
  --container-max-width: 1400px;
  --container-narrow-width: 1040px;
  --container-padding: clamp(1rem, 4vw, 3rem);

  /* ------------------------------------------------------------------------
     4. TACTILE HARD SHADOWS & DEPTH (Hardware aesthetic)
     ------------------------------------------------------------------------ */
  --shadow-pink-hard: 3px 3px 0px var(--color-accent-pink-dark);
  --shadow-purple-hard: 3px 3px 0px var(--color-accent-purple-dark);
  --shadow-pink-hover: 5px 5px 0px var(--color-accent-pink-dark);
  --shadow-purple-hover: 5px 5px 0px var(--color-accent-purple-dark);
  --shadow-active: 1px 1px 0px transparent;
  --shadow-card-subtle: 0 4px 20px -2px rgba(0, 0, 0, 0.6);

  /* ------------------------------------------------------------------------
     5. MOTION & SNAPPY TRANSITIONS
     ------------------------------------------------------------------------ */
  --transition-snappy: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-snap-fast: all 0.12s cubic-bezier(0.2, 0, 0, 1);
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /* ------------------------------------------------------------------------
     6. Z-INDEX SYSTEM
     ------------------------------------------------------------------------ */
  --z-negative: -1;
  --z-base: 1;
  --z-card: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
}