/* ==========================================================================
   ZUK / ZYG DESIGN TOKENS
   --------------------------------------------------------------------------
   Single source of truth for colour, type, spacing and motion.

   Three layers, in order:

     1. LEGACY        zukApp's existing values, reverse-engineered from the
                      inline styles that were scattered through the templates.
                      Kept so nothing already on the site shifts.
     2. ZYG SHARED    ZygApp's actual design language, read from
                      intsros/zygapp_gear_interactive_v2.html. This is the
                      vocabulary both products speak.
     3. BRIDGE        The mapping. zukApp keeps its warm teal/plum identity but
                      adopts ZygApp's structure — type stack, fluid scale,
                      surface depth, grid and glow.

   The split is deliberate: ZygApp is the product and should read cool, precise,
   engineered. zukApp is the person and should read warmer. Sharing structure
   while differing on accent is what makes two properties feel related rather
   than identical.

   RULE: no raw hex values anywhere else in the codebase. If you need a colour
   that isn't here, add it here first.
   ========================================================================== */

/* ==========================================================================
   LAYER 1 — LEGACY (zukApp as it already was)
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- surface */
  --surface-base:        #222222;  /* body background, .back1 */
  --surface-raised:      #2a1e29;  /* alternate panel, .back2 */
  --surface-sunken:      #1f282c;  /* label chips on /dev */
  --surface-card:        #242629;  /* flip-card back */
  --surface-card-light:  #bbbbbb;  /* flip-card front */
  --surface-overlay:     rgba(11, 10, 10, 0.7);  /* loading scrim */

  /* ------------------------------------------------------------------ brand */
  /* Teal is the primary identity. Plum is the secondary / "Alter" accent. */
  --brand-teal:          #6cb4a4;  /* wordmark, icon fill, primary accent */
  --brand-teal-soft:     #7dcab9;  /* inline links in body copy */
  --brand-teal-deep:     #264c44;
  --brand-teal-muted:    #3f5d57;
  --brand-teal-faded:    #526863;  /* marquee text */

  --brand-plum:          #b93498;  /* strongest magenta, internal nav links */
  --brand-plum-deep:     #5f214e;  /* [developer] label, audio toggle */
  --brand-plum-mid:      #884476;
  --brand-plum-dusty:    #855578;
  --brand-plum-dark:     #942e86;
  --brand-plum-wine:     #821f51;
  --brand-plum-slate:    #594857;

  --brand-cyan:          #4cacbd;  /* the /dev section's accent */
  --brand-orange:        #f35c20;
  --brand-progress:      #09b3b3;  /* loading indicator */

  /* -------------------------------------------------------------- ink/ text */
  --ink-primary:         #ececec;  /* body copy on dark */
  --ink-secondary:       #cccccc;  /* embed captions */
  --ink-tertiary:        #acacac;
  --ink-quaternary:      #a6a6a6;  /* project titles */
  --ink-muted:           #7d7d7d;  /* wordmark separator, subheads */
  --ink-dim:             #7c7c7c;
  --ink-on-light:        #000000;

  /* ------------------------------------------------------------ interaction */
  --focus-ring:          #d7d710;  /* the yellow hover fill, reused for :focus */
  --hover-warm:          #d7d710;
  --hover-sage:          #bbbbb2;
  --hover-mint:          #7dbea0;

  /* ------------------------------------------------------------- typography */
  --font-display: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --font-mono:    'Andale Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-body:    'Andale Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-ui:      -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-embed:   Interstate, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Tahoma, sans-serif;

  /* Type scale — the sizes actually in use, named. */
  --text-3xs:  9px;
  --text-2xs:  10px;
  --text-xs:   12px;
  --text-sm:   15px;
  --text-base: 16px;
  --text-lg:   22px;
  --text-xl:   25px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  40px;
  --text-5xl:  50px;
  --text-6xl:  60px;
  --text-7xl:  70px;
  --text-8xl:  100px;
  --text-9xl:  140px;   /* the big background glyphs */

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-loose: 1.75;

  --stroke-hairline: 1.2px;  /* -webkit-text-stroke on outlined wordmarks */

  /* ----------------------------------------------------------------- space */
  --space-1:  3px;
  --space-2:  10px;
  --space-3:  20px;
  --space-4:  40px;
  --space-5:  50px;
  --space-6:  68px;
  --space-7:  100px;
  --space-8:  170px;
  --space-9:  200px;

  /* ---------------------------------------------------------------- layout */
  --measure-copy:    700px;   /* .bio max-width */
  --measure-copy-wide: 1300px; /* .devBio max-width */
  --col-project:     200px;   /* project tile width */
  --nav-height:      48px;

  /* ------------------------------------------------------------------ tilt */
  /* The site's signature: everything is very slightly off-axis. */
  --tilt-subtle:  1deg;
  --tilt-light:   2deg;
  --tilt-medium:  3deg;
  --tilt-strong:  10deg;
  --tilt-hard:    30deg;

  /* ---------------------------------------------------------------- motion */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant:  0.15s;
  --dur-fast:     0.25s;
  --dur-slow:     1s;
  --dur-marquee:  15s;

  /* ------------------------------------------------------------------ misc */
  --z-below:      -1;
  --z-base:        1;
  --z-raised:      10;
  --z-nav:        100;
  --z-overlay:    9999;

  --grayscale-idle:   grayscale(100%);
  --grayscale-hover:  grayscale(0%);
  --dim-decorative:   0.25;   /* the big faded background icons */
}


/* ==========================================================================
   LAYER 2 — ZYG SHARED
   --------------------------------------------------------------------------
   ZygApp's real values. Copy this block into ZygApp verbatim; it is the
   contract between the two products.

   Source: intsros/zygapp_gear_interactive_v2.html
   ========================================================================== */

:root {
  /* ZygApp core palette */
  --zyg-black:   #080c14;   /* near-black navy — deeper and cooler than #222 */
  --zyg-blue:    #00d4ff;   /* primary signal */
  --zyg-violet:  #6f4cff;   /* secondary, pairs with blue in gradients */
  --zyg-amber:   #f59e0b;   /* warning / highlight */
  --zyg-white:   #e2e8f0;   /* body text */
  --zyg-muted:   rgba(226, 232, 240, 0.55);

  /* The signature gradient. Used on emphasised words, never on body text. */
  --zyg-gradient: linear-gradient(135deg, var(--zyg-blue), var(--zyg-violet));

  /* Type. ZygApp pairs Inter for UI with JetBrains Mono for labels and data. */
  --zyg-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --zyg-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Atmosphere: a faint technical grid plus two soft radial glows. This is the
     single most recognisable part of the ZygApp look and it costs nothing —
     no images, no JS. */
  --zyg-grid-size:   48px;
  --zyg-grid-line:   rgba(0, 212, 255, 0.025);
  --zyg-scanline:    rgba(0, 212, 255, 0.012);
  --zyg-hairline:    rgba(255, 255, 255, 0.07);
  --zyg-hairline-soft: rgba(255, 255, 255, 0.08);

  /* Structure */
  --zyg-measure:     1080px;  /* page max-width */
  --zyg-radius:      20px;    /* card corner */
  --zyg-radius-sm:   10px;

  /* Fluid display type — clamp() so it scales without breakpoints */
  --zyg-display: clamp(2rem, 5vw, 3.2rem);
  --zyg-display-sm: clamp(1.5rem, 3.5vw, 2.2rem);
  --zyg-tracking-tight: -0.03em;
  --zyg-tracking-label:  0.2em;
}


/* ==========================================================================
   LAYER 3 — BRIDGE
   --------------------------------------------------------------------------
   How zukApp consumes the shared layer. Change these assignments and the whole
   site re-themes; the components in system.css only ever read from here.
   ========================================================================== */

:root {
  /* Surfaces: adopt ZygApp's depth. #222 flat grey reads dated next to a
     near-black with a cool cast; the difference is subtle but it's most of
     why one looks 2016 and the other looks current. */
  --bg-deep:      var(--zyg-black);
  --bg-surface:   #10161f;   /* one step up from deep, for cards */
  --bg-raised:    #161d28;

  /* Accent: zukApp keeps teal + plum. This is the identity boundary — do NOT
     swap these for ZygApp's cyan/violet or the two sites stop being distinct. */
  --accent:        var(--brand-teal);
  --accent-soft:   var(--brand-teal-soft);
  --accent-alt:    var(--brand-plum);
  --accent-warm:   var(--zyg-amber);

  /* zukApp's gradient mirrors ZygApp's construction with its own hues. */
  --accent-gradient: linear-gradient(135deg, var(--brand-teal), var(--brand-plum));

  /* Text */
  --fg:           var(--zyg-white);
  --fg-muted:     var(--zyg-muted);
  --fg-faint:     rgba(226, 232, 240, 0.3);

  /* Type: shared stacks. Impact stays for the wordmark only — it's the one
     piece of the old identity worth keeping as-is. */
  --font-sans:    var(--zyg-sans);
  --font-label:   var(--zyg-mono);

  /* Shared structure */
  --measure:      var(--zyg-measure);
  --radius:       var(--zyg-radius);
  --radius-sm:    var(--zyg-radius-sm);
  --hairline:     var(--zyg-hairline);
}

/* --------------------------------------------------------------------------
   Motion preference. Anyone who has asked their OS to reduce motion should
   not get the marquee, the parallax scrub, or the scale-on-hover.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0.01s;
    --dur-fast:    0.01s;
    --dur-slow:    0.01s;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Focus visibility. Previously there was none anywhere — keyboard users had
   no idea where they were on the page.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Screen-reader-only utility, for labelling icon-only controls. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}