/* ================================================
   ZEN IT PORTFOLIO — Design Tokens
   "Neon Observatory" Design System
   ================================================ */

:root {
  /* ── Surface Colors (Tonal Depth Hierarchy) ── */
  --surface:                 #0b1326;
  --surface-dim:             #0b1326;
  --surface-low:             #131b2e;
  --surface-container:       #171f33;
  --surface-high:            #222a3d;
  --surface-highest:         #2d3449;
  --surface-bright:          #31394d;

  /* ── Primary Accent ── */
  --primary:                 #adc6ff;
  --primary-container:       #4d8eff;
  --primary-fixed:           #d8e2ff;
  --primary-fixed-dim:       #adc6ff;
  --on-primary:              #002e6a;
  --on-primary-container:    #00285d;

  /* ── Secondary ── */
  --secondary:               #b1c6f9;
  --secondary-container:     #304671;
  --on-secondary:            #182f59;

  /* ── Tertiary (Warm Accent) ── */
  --tertiary:                #ffb786;
  --tertiary-container:      #df7412;
  --on-tertiary:             #502400;

  /* ── Text Colors ── */
  --on-surface:              #dae2fd;
  --on-surface-variant:      #c2c6d6;
  --on-background:           #dae2fd;

  /* ── Outline / Borders ── */
  --outline:                 #8c909f;
  --outline-variant:         #424754;

  /* ── Feedback ── */
  --error:                   #ffb4ab;
  --error-container:         #93000a;
  --on-error:                #690005;
  --success:                 #6ee7a0;
  --success-container:       #064e3b;

  /* ── Inverse ── */
  --inverse-surface:         #dae2fd;
  --inverse-on-surface:      #283044;
  --inverse-primary:         #005ac2;

  /* ── Surface Tint / Variant ── */
  --surface-tint:            #adc6ff;
  --surface-variant:         #2d3449;

  /* ── Gradients ── */
  --gradient-primary:        linear-gradient(135deg, var(--primary), var(--primary-container));
  --gradient-primary-hover:  linear-gradient(135deg, var(--primary-fixed), var(--primary-container));
  --gradient-hero:           linear-gradient(180deg, var(--surface) 0%, var(--surface-low) 100%);

  /* ── Glow Effects ── */
  --glow-primary:            0 0 15px rgba(77, 142, 255, 0.3);
  --glow-primary-strong:     0 0 30px rgba(77, 142, 255, 0.4), 0 0 60px rgba(77, 142, 255, 0.15);
  --glow-card:               0 4px 40px rgba(173, 198, 255, 0.08);
  --glow-error:              0 0 15px rgba(255, 180, 171, 0.3);

  /* ── Ambient Shadows ── */
  --shadow-sm:               0 2px 8px rgba(6, 14, 32, 0.4);
  --shadow-md:               0 4px 20px rgba(6, 14, 32, 0.5);
  --shadow-lg:               0 8px 40px rgba(6, 14, 32, 0.6);
  --shadow-modal:            0 16px 60px rgba(6, 14, 32, 0.7);

  /* ── Typography — Font Families ── */
  --font-headline:           'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:               'Manrope', system-ui, -apple-system, sans-serif;
  --font-label:              'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* ── Typography — Font Sizes ── */
  --text-xs:                 0.6875rem;   /* 11px — label-sm */
  --text-sm:                 0.8125rem;   /* 13px — label-md */
  --text-base:               0.875rem;    /* 14px — body-md */
  --text-md:                 1rem;        /* 16px — body-lg */
  --text-lg:                 1.125rem;    /* 18px — title-sm */
  --text-xl:                 1.25rem;     /* 20px — title-md */
  --text-2xl:                1.5rem;      /* 24px — headline-sm */
  --text-3xl:                2rem;        /* 32px — headline-md */
  --text-4xl:                2.5rem;      /* 40px — headline-lg */
  --text-5xl:                3rem;        /* 48px — display-sm */
  --text-6xl:                3.5rem;      /* 56px — display-md */
  --text-7xl:                4.5rem;      /* 72px — display-lg */

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

  /* ── Typography — Line Heights ── */
  --leading-tight:           1.15;
  --leading-snug:            1.3;
  --leading-normal:          1.5;
  --leading-relaxed:         1.7;

  /* ── Typography — Letter Spacing ── */
  --tracking-tight:          -0.04em;
  --tracking-normal:         0;
  --tracking-wide:           0.05em;
  --tracking-wider:          0.1em;

  /* ── Spacing Scale (8px base) ── */
  --space-0:                 0;
  --space-1:                 0.25rem;     /* 4px */
  --space-2:                 0.5rem;      /* 8px */
  --space-3:                 0.75rem;     /* 12px */
  --space-4:                 1rem;        /* 16px */
  --space-5:                 1.25rem;     /* 20px */
  --space-6:                 1.5rem;      /* 24px */
  --space-8:                 2rem;        /* 32px */
  --space-10:                2.5rem;      /* 40px */
  --space-12:                3rem;        /* 48px */
  --space-16:                4rem;        /* 64px */
  --space-20:                5rem;        /* 80px */
  --space-24:                6rem;        /* 96px */
  --space-32:                8rem;        /* 128px */

  /* ── Border Radius ── */
  --radius-xs:               0.125rem;    /* 2px */
  --radius-sm:               0.25rem;     /* 4px */
  --radius-md:               0.375rem;    /* 6px */
  --radius-lg:               0.5rem;      /* 8px */
  --radius-xl:               0.75rem;     /* 12px */
  --radius-2xl:              1rem;        /* 16px */
  --radius-3xl:              1.5rem;      /* 24px */
  --radius-full:             9999px;

  /* ── Transitions ── */
  --ease-default:            cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:                 cubic-bezier(0.4, 0, 1, 1);
  --ease-out:                cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:             cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:           150ms;
  --duration-normal:         250ms;
  --duration-slow:           400ms;
  --duration-slower:         600ms;

  /* ── Z-Index Scale ── */
  --z-base:                  0;
  --z-above:                 10;
  --z-sticky:                100;
  --z-navbar:                200;
  --z-dropdown:              300;
  --z-modal-backdrop:        400;
  --z-modal:                 500;
  --z-toast:                 600;

  /* ── Layout ── */
  --container-max:           1280px;
  --container-wide:          1440px;
  --container-narrow:        960px;
  --page-gutter:             var(--space-6);
  --section-gap:             var(--space-24);
  --navbar-height:           4rem;

  /* ── Glassmorphism ── */
  --glass-bg:                rgba(45, 52, 73, 0.4);
  --glass-blur:              16px;
  --glass-border:            1px solid rgba(66, 71, 84, 0.2);

  /* ── Grid Background ── */
  --grid-color:              rgba(173, 198, 255, 0.03);
  --grid-size:               60px;
}

/* ── Responsive Overrides ── */
@media (min-width: 768px) {
  :root {
    --page-gutter:           var(--space-10);
  }
}

@media (min-width: 1024px) {
  :root {
    --page-gutter:           var(--space-16);
  }
}

@media (min-width: 1440px) {
  :root {
    --page-gutter:           var(--space-24);
  }
}