/* ===================================================================
   DESIGN TOKENS — Maykon Tardoche · FullStack Developer Portfolio
   =================================================================== */

:root{
  /* ---- Fonts ---- */
  --font-display:"Space Grotesk", "Inter", sans-serif;
  --font-body:"Inter", sans-serif;
  --font-accent:"Fraunces", serif;
  --font-mono:"JetBrains Mono", "Space Mono", monospace;

  /* ---- Fluid type scale ---- */
  --fs-xxl: clamp(3.2rem, 3rem + 6vw, 9rem);
  --fs-xl:  clamp(2.4rem, 1.8rem + 3.6vw, 5rem);
  --fs-lg:  clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem);
  --fs-md:  clamp(1.25rem, 1.05rem + .6vw, 1.6rem);
  --fs-base:clamp(1rem, .94rem + .2vw, 1.125rem);
  --fs-sm:  clamp(.82rem, .8rem + .1vw, .92rem);
  --fs-xs:  clamp(.7rem, .68rem + .1vw, .78rem);

  /* ---- Spacing scale ---- */
  --sp-1: .4rem;
  --sp-2: .8rem;
  --sp-3: 1.6rem;
  --sp-4: 2.4rem;
  --sp-5: 3.6rem;
  --sp-6: 5.6rem;
  --sp-7: 8rem;
  --sp-8: 11rem;

  --container: 1360px;
  --gutter: clamp(1.25rem, 1rem + 2vw, 4rem);

  /* ---- Radius / motion ---- */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 28px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-1: .3s;
  --dur-2: .6s;
  --dur-3: 1s;

  --line: 1px;

  /* ---- Color roles (dark = default) ---- */
  --bg:            #07070a;
  --bg-soft:       #0d0d12;
  --bg-elevated:   #121218;
  --ink:           #f4f3ee;
  --ink-soft:      #b9b8c3;
  --ink-mute:      #75757f;
  --hairline:      rgba(244,243,238,.1);
  --hairline-strong: rgba(244,243,238,.18);

  --accent:        #d7ff3f;   /* acid lime — signature */
  --accent-ink:    #0a0e02;   /* dark text on lime chips */
  --accent-2:      #6a5cff;   /* violet — secondary / webgl */
  --accent-3:      #ff5b45;   /* warm ember — tertiary */

  --grad-mesh: radial-gradient(60% 60% at 20% 20%, rgba(106,92,255,.35), transparent 60%),
               radial-gradient(50% 50% at 85% 30%, rgba(215,255,63,.16), transparent 60%),
               radial-gradient(60% 60% at 50% 90%, rgba(255,91,69,.14), transparent 60%);

  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,.55);
  --shadow-sm: 0 8px 24px -8px rgba(0,0,0,.4);

  --noise-opacity: .05;

  color-scheme: dark;
}

html[data-theme="light"]{
  --bg:            #f2f0ea;
  --bg-soft:       #ffffff;
  --bg-elevated:   #ffffff;
  --ink:           #0b0b0d;
  --ink-soft:      #46454c;
  --ink-mute:      #86858d;
  --hairline:      rgba(11,11,13,.1);
  --hairline-strong: rgba(11,11,13,.2);

  --accent:        #4b3bff;
  --accent-ink:    #ffffff;
  --accent-2:      #b8ff3f;
  --accent-3:      #ff5b45;

  --grad-mesh: radial-gradient(60% 60% at 20% 15%, rgba(75,59,255,.14), transparent 60%),
               radial-gradient(50% 50% at 85% 25%, rgba(184,255,63,.16), transparent 60%),
               radial-gradient(60% 60% at 50% 95%, rgba(255,91,69,.1), transparent 60%);

  --shadow-lg: 0 30px 80px -25px rgba(11,11,13,.25);
  --shadow-sm: 0 8px 24px -10px rgba(11,11,13,.18);
  --noise-opacity: .035;

  color-scheme: light;
}

@media (prefers-color-scheme: light){
  html:not([data-theme]){ color-scheme: light; }
}