/* ═══════════════════════════════════════════════════════════
   STAYUX PORTFOLIO - DESIGN SYSTEM TOKENS
   Source of truth for all design decisions
   ═══════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------──
   CUSTOM FONT - SX
   ---------------------------------------------------------── */

@font-face {
  font-family: 'SX';
  src: url('/fonts/SX-Light.woff2') format('woff2'),
       url('/fonts/SX-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SX';
  src: url('/fonts/SX-Regular.woff2') format('woff2'),
       url('/fonts/SX-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SX';
  src: url('/fonts/SX-Medium.woff2') format('woff2'),
       url('/fonts/SX-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SX';
  src: url('/fonts/SX-Bold.woff2') format('woff2'),
       url('/fonts/SX-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------──
     TYPOGRAPHY
     ---------------------------------------------------------── */

  /* Font Families */
  --font-primary: 'SX', sans-serif;
  --font-display: 'SX', sans-serif;
  --font-mono: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Font Sizes (Major Third scale - 1.25 ratio from 16px base) */
  --text-xs: 0.64rem;     /* 10.24px - base ÷ 1.25² */
  --text-sm: 0.8rem;      /* 12.8px - base ÷ 1.25 */
  --text-base: 1rem;      /* 16px - Accessible default */
  --text-base-plus: 1.05rem; /* 18px - between base and lg */
  --text-lg: 1.25rem;     /* 20px - base × 1.25 */
  --text-xl: 1.5625rem;   /* 25px - base × 1.25² */
  --text-2xl: 1.953rem;   /* 31.25px - base × 1.25³ */
  --text-3xl: 2.441rem;   /* 39.06px - base × 1.25⁴ */
  --text-4xl: 3.052rem;   /* 48.83px - base × 1.25⁵ */

  /* Font Weights */
  --font-thin: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-compressed: 0.85;
  --leading-tighter: 1.1;
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;
  --leading-loose: 1.85;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-04: 0.04em;
  --tracking-06: 0.06em;
  --tracking-wider: 0.05em;
  --tracking-08: 0.08em;
  --tracking-widest: 0.1em;
  --tracking-12: 0.12em;
  --tracking-14: 0.14em;
  --tracking-15: 0.15em;
  --tracking-16: 0.16em;
  --tracking-18: 0.18em;
  --tracking-20: 0.2em;
  --tracking-22: 0.22em;
  --tracking-28: 0.28em;

  /* ---------------------------------------------------------──
     SPACING (8px Grid)
     ---------------------------------------------------------── */

  --space-0: 0;
  --space-1: 0.125rem;  /* 2px */
  --space-2: 0.35rem;   /* 4px */
  --space-3: 0.3rem;    /* 8px */
  --space-4: 0.8rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */
  --space-10: 8rem;     /* 128px */

  /* ---------------------------------------------------------──
     LAYOUT
     ---------------------------------------------------------── */

  /* Breakpoints */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 880px;
  --container-xl: 1100px;

  /* ---------------------------------------------------------──
     BORDERS & RADII
     ---------------------------------------------------------── */

  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-full: 50%;

  --border-width: 1px;
  --border-width-thick: 2px;

  /* ---------------------------------------------------------──
     SHADOWS & EFFECTS
     ---------------------------------------------------------── */

  --shadow-sm: 0 0 12px;
  --shadow-md: 0 0 22px;
  --shadow-lg: 0 0 32px;

  /* Z-index Scale */
  --z-base: 1;
  --z-overlay: 50;
  --z-drawer: 99;
  --z-modal: 100;
  --z-notification: 1000;

  /* ---------------------------------------------------------──
     ANIMATION
     ---------------------------------------------------------── */

  /* Durations */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* Easing Functions */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------------------------------------------------------──
     COLOR PRIMITIVES
     ═══════════════════════════════════════════════════════════
     Structure: Each color has 3 variations
     - Shades: Base → Darker (add black)
     - Tints: Lightest → Base (add white)
     - Tones: Base → Gray (add neutral)
     ---------------------------------------------------------── */

  /* ════════════════════════════════════════════════════════════
     PRIMARY (Brand Color) - Base: oklch(0.503 0.287 280)
     ════════════════════════════════════════════════════════════ */

  /* Primary Shades (Base → Darker) — hue anchored at 280 */
  --primary-shade-50: oklch(0.503 0.287 280);   /* was: #571FFF */
  --primary-shade-100: oklch(0.469 0.261 280);  /* was: #511FE5 */
  --primary-shade-200: oklch(0.436 0.237 280);  /* was: #4B1ECC */
  --primary-shade-300: oklch(0.402 0.212 280);  /* was: #441DB3 */
  --primary-shade-400: oklch(0.369 0.187 280);  /* was: #3E1B9B */
  --primary-shade-500: oklch(0.334 0.162 280);  /* was: #371983 */
  --primary-shade-600: oklch(0.301 0.136 280);  /* was: #30176C */
  --primary-shade-700: oklch(0.268 0.110 280);  /* was: #291556 */
  --primary-shade-800: oklch(0.234 0.085 280);  /* was: #211241 */
  --primary-shade-900: oklch(0.202 0.058 280);  /* was: #1A0F2D */
  --primary-shade-950: oklch(0.160 0.039 280);  /* was: #12081A */

  /* Primary Tints (Lightest → Base) */
  --primary-tint-50: oklch(0.953 0.028 306);    /* was: #F4EBFF */
  --primary-tint-100: oklch(0.905 0.057 305);   /* was: #E8D7FF */
  --primary-tint-200: oklch(0.858 0.086 304);   /* was: #DCC3FF */
  --primary-tint-300: oklch(0.813 0.114 303);   /* was: #D0B0FF */
  --primary-tint-400: oklch(0.765 0.143 301);   /* was: #C29CFF */
  --primary-tint-500: oklch(0.720 0.170 299);   /* was: #B489FF */
  --primary-tint-600: oklch(0.676 0.196 297);   /* was: #A676FF */
  --primary-tint-700: oklch(0.630 0.222 294);   /* was: #9562FF */
  --primary-tint-800: oklch(0.587 0.246 291);   /* was: #844EFF */
  --primary-tint-900: oklch(0.543 0.267 286);   /* was: #6F38FF */
  --primary-tint-950: oklch(0.503 0.287 280);   /* was: #571FFF */

  /* Primary Tones (Base → Gray) */
  --primary-tone-50: oklch(0.503 0.287 280);    /* was: #571FFF */
  --primary-tone-100: oklch(0.510 0.263 284);   /* was: #622EF2 */
  --primary-tone-200: oklch(0.519 0.239 288);   /* was: #6B3AE6 */
  --primary-tone-300: oklch(0.528 0.213 291);   /* was: #7245D9 */
  --primary-tone-400: oklch(0.535 0.186 294);   /* was: #774ECC */
  --primary-tone-500: oklch(0.545 0.159 297);   /* was: #7B57C0 */
  --primary-tone-600: oklch(0.556 0.128 299);   /* was: #7E60B3 */
  --primary-tone-700: oklch(0.566 0.097 301);   /* was: #8068A6 */
  --primary-tone-800: oklch(0.577 0.066 303);   /* was: #81709A */
  --primary-tone-900: oklch(0.588 0.033 305);   /* was: #81788D */
  --primary-tone-950: oklch(0.600 0.000 280);   /* was: #808080 */

  /* ════════════════════════════════════════════════════════════
     SECONDARY (Complementary One) - Base: oklch(0.634 0.235 9)
     ════════════════════════════════════════════════════════════ */

  /* Secondary Shades (Base → Darker) */
  --secondary-shade-50: oklch(0.634 0.235 9);   /* was: #F5276C */
  --secondary-shade-100: oklch(0.588 0.213 9);  /* was: #DC2862 */
  --secondary-shade-200: oklch(0.543 0.192 9);  /* was: #C42758 */
  --secondary-shade-300: oklch(0.499 0.171 9);  /* was: #AD264E */
  --secondary-shade-400: oklch(0.453 0.150 9);  /* was: #962444 */
  --secondary-shade-500: oklch(0.407 0.128 9);  /* was: #7F223B */
  --secondary-shade-600: oklch(0.363 0.107 9);  /* was: #6A1F32 */
  --secondary-shade-700: oklch(0.319 0.085 9);  /* was: #551C29 */
  --secondary-shade-800: oklch(0.272 0.063 9);  /* was: #401820 */
  --secondary-shade-900: oklch(0.227 0.043 9);  /* was: #2D1318 */
  --secondary-shade-950: oklch(0.177 0.026 9);  /* was: #1B0C0E */

  /* Secondary Tints (Lightest → Base) */
  --secondary-tint-50: oklch(0.965 0.017 9);    /* was: #FFEFF1 */
  --secondary-tint-100: oklch(0.929 0.037 9);   /* was: #FFDEE2 */
  --secondary-tint-200: oklch(0.894 0.057 9);   /* was: #FFCDD4 */
  --secondary-tint-300: oklch(0.861 0.077 10);  /* was: #FFBDC6 */
  --secondary-tint-400: oklch(0.828 0.099 9);   /* was: #FFACB9 */
  --secondary-tint-500: oklch(0.795 0.122 9);   /* was: #FF9AAB */
  --secondary-tint-600: oklch(0.763 0.145 9);   /* was: #FF889E */
  --secondary-tint-700: oklch(0.733 0.169 10);  /* was: #FF7591 */
  --secondary-tint-800: oklch(0.699 0.191 9);   /* was: #FC6085 */
  --secondary-tint-900: oklch(0.667 0.214 9);   /* was: #F94878 */
  --secondary-tint-950: oklch(0.634 0.235 9);   /* was: #F5276C */

  /* Secondary Tones (Base → Gray) */
  --secondary-tone-50: oklch(0.634 0.235 9);    /* was: #F5276C */
  --secondary-tone-100: oklch(0.631 0.211 9);   /* was: #EB3C6E */
  --secondary-tone-200: oklch(0.627 0.187 9);   /* was: #E04A70 */
  --secondary-tone-300: oklch(0.623 0.165 9);   /* was: #D65472 */
  --secondary-tone-400: oklch(0.621 0.139 10);  /* was: #CB5E73 */
  --secondary-tone-500: oklch(0.617 0.117 10);  /* was: #C06575 */
  --secondary-tone-600: oklch(0.613 0.093 9);   /* was: #B46C78 */
  --secondary-tone-700: oklch(0.610 0.069 10);  /* was: #A8727A */
  --secondary-tone-800: oklch(0.607 0.047 10);  /* was: #9C777C */
  --secondary-tone-900: oklch(0.603 0.022 10);  /* was: #8E7C7E */
  --secondary-tone-950: oklch(0.600 0.000 280); /* was: #808080 */

  /* ════════════════════════════════════════════════════════════
     TERTIARY (Complementary Two) - Base: oklch(0.649 0.214 33)
     ════════════════════════════════════════════════════════════ */

  /* Tertiary Shades (Base → Darker) */
  --tertiary-shade-50: oklch(0.649 0.214 33);   /* was: #F54927 */
  --tertiary-shade-100: oklch(0.603 0.195 33);  /* was: #DD4424 */
  --tertiary-shade-200: oklch(0.556 0.176 33);  /* was: #C53E22 */
  --tertiary-shade-300: oklch(0.510 0.156 34);  /* was: #AD391F */
  --tertiary-shade-400: oklch(0.463 0.137 34);  /* was: #96331D */
  --tertiary-shade-500: oklch(0.416 0.119 34);  /* was: #802D1A */
  --tertiary-shade-600: oklch(0.370 0.099 36);  /* was: #6A2817 */
  --tertiary-shade-700: oklch(0.324 0.080 36);  /* was: #552214 */
  --tertiary-shade-800: oklch(0.278 0.061 37);  /* was: #411C11 */
  --tertiary-shade-900: oklch(0.232 0.042 41);  /* was: #2E160D */
  --tertiary-shade-950: oklch(0.182 0.028 48);  /* was: #1C0E07 */

  /* Tertiary Tints (Lightest → Base) */
  --tertiary-tint-50: oklch(0.965 0.018 43);    /* was: #FFF0EA */
  --tertiary-tint-100: oklch(0.929 0.038 41);   /* was: #FFE0D5 */
  --tertiary-tint-200: oklch(0.896 0.057 40);   /* was: #FFD1C1 */
  --tertiary-tint-300: oklch(0.864 0.076 40);   /* was: #FFC2AD */
  --tertiary-tint-400: oklch(0.831 0.097 39);   /* was: #FFB299 */
  --tertiary-tint-500: oklch(0.799 0.118 38);   /* was: #FFA285 */
  --tertiary-tint-600: oklch(0.769 0.139 37);   /* was: #FF9272 */
  --tertiary-tint-700: oklch(0.742 0.160 37);   /* was: #FF825F */
  --tertiary-tint-800: oklch(0.711 0.180 35);   /* was: #FD704D */
  --tertiary-tint-900: oklch(0.681 0.198 34);   /* was: #FA5E3A */
  --tertiary-tint-950: oklch(0.649 0.214 33);   /* was: #F54927 */

  /* Tertiary Tones (Base → Gray) */
  --tertiary-tone-50: oklch(0.649 0.214 33);    /* was: #F54927 */
  --tertiary-tone-100: oklch(0.644 0.194 34);   /* was: #EB5331 */
  --tertiary-tone-200: oklch(0.639 0.174 35);   /* was: #E15B3A */
  --tertiary-tone-300: oklch(0.635 0.155 36);   /* was: #D76243 */
  --tertiary-tone-400: oklch(0.629 0.134 37);   /* was: #CC684C */
  --tertiary-tone-500: oklch(0.624 0.113 37);   /* was: #C16D55 */
  --tertiary-tone-600: oklch(0.620 0.092 38);   /* was: #B6725D */
  --tertiary-tone-700: oklch(0.615 0.070 38);   /* was: #AA7666 */
  --tertiary-tone-800: oklch(0.610 0.047 38);   /* was: #9D7A6F */
  --tertiary-tone-900: oklch(0.604 0.024 39);   /* was: #8F7D77 */
  --tertiary-tone-950: oklch(0.600 0.000 280);  /* was: #808080 */

  /* ════════════════════════════════════════════════════════════
     NEUTRAL (Slate) - Violet-tinted, regenerated natively in OKLCH
     H=280 (violet), C=0.006 (subtle tint), L decreases n50→n950
     ════════════════════════════════════════════════════════════ */

  --n50: oklch(0.980 0.006 280);
  --n100: oklch(0.960 0.006 280);
  --n200: oklch(0.910 0.006 280);
  --n300: oklch(0.840 0.006 280);
  --n400: oklch(0.650 0.006 280);
  --n500: oklch(0.490 0.006 280);
  --n600: oklch(0.380 0.006 280);
  --n700: oklch(0.300 0.006 280);
  --n800: oklch(0.200 0.006 280);
  --n900: oklch(0.140 0.006 280);
  --n950: oklch(0.100 0.006 280);

  /* NUVIZUS COLORS */

 --nuvizus-brand-light: oklch(88.162% 0.20673 156.686);
 --nuvizus-brand-dark: oklch(57.983% 0.1429 155.095);


  /* --- Additional Color Stops for Gradients --- */
  --primary-grad-mid: oklch(0.630 0.222 294);   /* was: #9562FF */
  --secondary-grad-mid: oklch(0.763 0.145 9);   /* was: #FF889E */
  --tertiary-grad-mid: oklch(0.769 0.139 37);   /* was: #FF9272 */

  /* --- Utility Colors --- */
  --primary: oklch(0.503 0.287 280);            /* was: #571FFF */
  --secondary: oklch(0.634 0.235 9);            /* was: #F5276C */
  --tertiary: oklch(0.649 0.214 33);            /* was: #F54927 */
  --success: oklch(0.800 0.182 152);            /* was: #4ADE80 */
  --white: oklch(1.000 0.000 280);              /* was: #FFFFFF */

  /* --- Overlays & Transparency Utilities --- */
  --overlay-black-55: oklch(0 0 0 / 55%);
  --overlay-black-75: oklch(0 0 0 / 75%);
  --overlay-white-5: oklch(1 0 0 / 5%);
  --overlay-white-45: oklch(1 0 0 / 45%);
  --overlay-primary-3: oklch(0.503 0.287 280 / 3%);
  --overlay-primary-5: oklch(0.503 0.287 280 / 5%);
  --overlay-primary-7: oklch(0.503 0.287 280 / 7%);
  --overlay-primary-8: oklch(0.503 0.287 280 / 8%);
  --overlay-primary-10: oklch(0.503 0.287 280 / 10%);
  --overlay-primary-12: oklch(0.503 0.287 280 / 12%);
  --overlay-secondary-10: oklch(0.634 0.235 9 / 10%);
  --overlay-secondary-25: oklch(0.634 0.235 9 / 25%);
  --overlay-secondary-40: oklch(0.634 0.235 9 / 40%);
  --overlay-tertiary-10: oklch(0.649 0.214 33 / 10%);
  --overlay-tertiary-25: oklch(0.649 0.214 33 / 25%);
  --overlay-tertiary-40: oklch(0.649 0.214 33 / 40%);
}

/* ---------------------------------------------------------──
   THEME DEFINITIONS
   ---------------------------------------------------------── */

/* --- DARK THEME (default) --- */
[data-theme="dark"] {
  /* Backgrounds */
  --bg: var(--n950);
  --node-bg: oklch(0.503 0.287 280 / 3.5%);

  /* Text Colors */
  --text-primary: var(--n50);
  --text-body: var(--n100);
  --text-muted: var(--n300);

  /* Links */
  --link: var(--primary-tint-200);
  --link-hover: var(--primary-tint-600);

  /* Borders */
  --border: oklch(0.503 0.287 280 / 18%);
  --border-hover: oklch(0.503 0.287 280 / 38%);

  /* Effects */
  --glow: oklch(0.503 0.287 280 / 40%);
  --glow-sm: oklch(0.503 0.287 280 / 20%);

  /* Components */
  --nav-bg: oklch(0.07 0.006 280 / 78%);
  --focus-ring: var(--primary-tint-600);

  /* Decorative */
  --grid-line: var(--watermark);
  --scanline: oklch(0 0 0 / 2.2%);

  /* Tags */
  --tag-p-bdr: oklch(0.503 0.287 280 / 30%);
  --tag-p-txt: var(--primary-tint-400);
  --tag-s-bdr: oklch(0.634 0.235 9 / 30%);
  --tag-s-txt: var(--secondary-tint-400);
  --tag-t-bdr: oklch(0.649 0.214 33 / 30%);
  --tag-t-txt: var(--tertiary-tint-400);

  /* Special */
  --hero-img-filter: drop-shadow(0 0 60px oklch(0.503 0.287 280 / 50%));
  --watermark: oklch(0.503 0.287 280 / 6%);
}

/* --- LIGHT THEME (cyber daylight) --- */
[data-theme="light"] {
  /* Backgrounds */
  --bg: oklch(0.978 0.007 296);                /* was: #F8F7FC */
  --node-bg: oklch(0.503 0.287 280 / 2.5%);

  /* Text Colors */
  --text-primary: var(--n900);
  --text-body: var(--n700);
  --text-muted: var(--n600);

  /* Links */
  --link: var(--primary-shade-200);
  --link-hover: var(--primary-shade-300);

  /* Borders */
  --border: var(--n200);
  --border-hover: var(--n300);

  /* Effects */
  --glow: transparent;
  --glow-sm: transparent;

  /* Components */
  --nav-bg: oklch(1 0 0 / 92%);
  --focus-ring: var(--primary);

  /* Special */
  --hero-img-filter: drop-shadow(0 4px 24px oklch(0.503 0.287 280 / 18%));
  --watermark: oklch(0.503 0.287 280 / 8%);

  /* Decorative */
  --grid-line: var(--n100);
  --scanline: transparent;

  /* Tags */
  --tag-p-bdr: oklch(0.503 0.287 280 / 22%);
  --tag-p-txt: var(--primary-shade-200);
  --tag-s-bdr: oklch(0.634 0.235 9 / 22%);
  --tag-s-txt: var(--secondary-shade-200);
  --tag-t-bdr: oklch(0.649 0.214 33 / 22%);
  --tag-t-txt: var(--tertiary-shade-200);
}

/* ---------------------------------------------------------──
   P3 WIDE-GAMUT OVERRIDES
   Higher chroma for displays that support Display P3
   ---------------------------------------------------------── */

@media (color-gamut: p3) {
  :root {
    --primary-shade-50: oklch(0.503 0.359 280);   /* P3 boost: C+25% */
    --secondary-shade-50: oklch(0.634 0.294 9);   /* P3 boost: C+25% */
    --tertiary-shade-50: oklch(0.649 0.268 33);   /* P3 boost: C+25% */
    --primary: oklch(0.503 0.359 280);
    --secondary: oklch(0.634 0.294 9);
    --tertiary: oklch(0.649 0.268 33);
  }
}