/* ==========================================================================
   DESIGN SYSTEM — Zeta IT Consulting
   Foundation tokens, reset, typography, and utility classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CUSTOM PROPERTIES (Design Tokens)
   --------------------------------------------------------------------------
   Breakpoints (mobile-first):
     sm:  40em  (640px)  — large phones / small tablets
     md:  48em  (768px)  — tablets
     lg:  64em  (1024px) — small desktops
     xl:  80em  (1280px) — large desktops
   -------------------------------------------------------------------------- */

:root {
    /* ---- Colors ---- */

    /* Base (dark theme) */
    --color-bg:            #0f1117;
    --color-bg-elevated:   #1a1d27;
    --color-bg-surface:    #232733;
    --color-bg-hover:      #2a2f3d;

    /* Text */
    --color-text:          #e4e5ea;
    --color-text-muted:    #9499a8;
    --color-text-faint:    #636878;

    /* Accent gradient (electric blue → purple) */
    --color-accent-start:  #4f46e5;
    --color-accent-end:    #7c3aed;
    --gradient-accent:     linear-gradient(135deg, var(--color-accent-start), var(--color-accent-end));

    /* Accent solid (for borders, focus rings) */
    --color-accent:        #6366f1;
    --color-accent-hover:  #818cf8;

    /* Semantic */
    --color-success:       #22c55e;
    --color-error:         #ef4444;
    --color-warning:       #f59e0b;

    /* Border / divider */
    --color-border:        #2a2f3d;
    --color-border-subtle: #1f2330;

    /* ---- Typography ---- */
    --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', var(--font-sans);

    --text-xs:   clamp(0.75rem,  0.7rem  + 0.15vw, 0.8125rem);
    --text-sm:   clamp(0.8125rem, 0.775rem + 0.2vw, 0.875rem);
    --text-base: clamp(0.9375rem, 0.9rem  + 0.2vw, 1rem);
    --text-lg:   clamp(1.0625rem, 1rem    + 0.3vw, 1.125rem);
    --text-xl:   clamp(1.1875rem, 1.1rem  + 0.4vw, 1.25rem);
    --text-2xl:  clamp(1.4rem,   1.25rem  + 0.6vw, 1.5rem);
    --text-3xl:  clamp(1.75rem,  1.5rem   + 1vw,   1.875rem);
    --text-4xl:  clamp(2.1rem,   1.75rem  + 1.5vw, 2.25rem);
    --text-5xl:  clamp(2.75rem,  2.25rem  + 2vw,   3rem);
    --text-6xl:  clamp(3.25rem,  2.5rem   + 3vw,   3.75rem);

    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.02em;
    --tracking-wider:   0.04em;

    /* ---- Spacing scale (4px base) ---- */
    --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 */

    /* ---- Border radius ---- */
    --radius-sm:   0.375rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-full: 9999px;

    /* ---- Shadows ---- */
    --shadow-sm:   0 1px  2px  rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px  6px  rgba(0, 0, 0, 0.25);
    --shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.3);
    --shadow-xl:   0 20px 25px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.25);

    /* ---- Transitions ---- */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   400ms;

    /* ---- Layout ---- */
    --container-max:     72rem;   /* 1152px */
    --container-padding: var(--space-6);
    --section-padding-y: var(--space-20);

    /* ---- Z-index scale ---- */
    --z-base:    1;
    --z-sticky:  100;
    --z-overlay: 200;
    --z-modal:   300;
}


/* --------------------------------------------------------------------------
   2. CSS RESET (modern, opinionated)
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100dvh;
    overflow-x: hidden;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    font-family: var(--font-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: #fff;
}

p {
    overflow-wrap: break-word;
}

::selection {
    background-color: rgba(99, 102, 241, 0.3);
    color: #fff;
}


/* --------------------------------------------------------------------------
   3. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1 { font-size: var(--text-5xl); font-weight: 700; }
h2 { font-size: var(--text-4xl); font-weight: 700; }
h3 { font-size: var(--text-3xl); font-weight: 600; }
h4 { font-size: var(--text-2xl); font-weight: 600; }
h5 { font-size: var(--text-xl);  font-weight: 600; }
h6 { font-size: var(--text-lg);  font-weight: 600; }

p {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    line-height: var(--leading-loose);
}

small {
    font-size: var(--text-sm);
}

strong {
    font-weight: 600;
    color: #fff;
}

/* Links in body text */
main a:not(.btn):not(.nav-link):not(.site-logo) {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color var(--duration-fast) var(--ease-out);
}

main a:not(.btn):not(.nav-link):not(.site-logo):hover {
    color: #fff;
}


/* --------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.section {
    padding-block: var(--section-padding-y);
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-center {
    text-align: center;
}


/* --------------------------------------------------------------------------
   5. GRADIENT TEXT
   -------------------------------------------------------------------------- */

.gradient-text {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}


/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition:
        background-color var(--duration-normal) var(--ease-out),
        border-color var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    white-space: nowrap;
    user-select: none;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--gradient-accent);
    color: #fff;
    border-color: transparent;
}

.btn-primary:hover {
    box-shadow: var(--shadow-glow);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-accent-hover);
    border-color: var(--color-accent);
}

.btn-secondary:hover {
    background-color: rgba(99, 102, 241, 0.1);
    border-color: var(--color-accent-hover);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
    border-radius: var(--radius-lg);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}


/* --------------------------------------------------------------------------
   7. SCROLL REVEAL (foundation for GSAP, Task 6)
   -------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(24px);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
}


/* --------------------------------------------------------------------------
   8. FOCUS STYLES (accessibility)
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Remove default focus ring for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}


/* --------------------------------------------------------------------------
   9. RESPONSIVE TOKEN OVERRIDES
   -------------------------------------------------------------------------- */

/* Small screens: tighter padding, less vertical spacing */
@media (max-width: 40em) {
    :root {
        --container-padding: var(--space-4);
        --section-padding-y: var(--space-12);
    }
}

/* Medium screens: moderate spacing */
@media (min-width: 40em) and (max-width: 64em) {
    :root {
        --section-padding-y: var(--space-16);
    }
}


/* --------------------------------------------------------------------------
   10. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}