/* =========================================================
   TOKENS — colour, type, space, motion.
   Change things here and the whole site follows.
   ========================================================= */

:root {
  /* ---- Palette (dark is the default look) ---- */
  --ink:            #0b0b0c;   /* background */
  --ink-2:          #131315;   /* raised surface */
  --ink-3:          #1c1c1f;   /* hairlines, cards */
  --paper:          #f1ede6;   /* main text */
  --paper-dim:      #8f8b84;   /* secondary text */
  --accent:         #d9ff4b;   /* signal colour */
  --accent-warm:    #ff5c35;

  /* ---- Discipline colours ----
     One colour per discipline, used everywhere a project is
     labelled: archive tags, group headers, filter chips, the
     breadcrumb of a case study, the home index. Three colours,
     learnt once, and the same in both themes. */
  --c-ux:        #d9ff4b;      /* product design UX/UI */
  --c-front:     #7ee0ff;      /* front-end development */
  --c-graphic:   #ff8a5c;      /* graphic design */
  --c-on-tag:    #0b0b0c;      /* text on a solid discipline tag */

  --bg:             var(--ink);
  --bg-raised:      var(--ink-2);
  --fg:             var(--paper);
  --fg-dim:         var(--paper-dim);
  --line:           color-mix(in srgb, var(--fg) 14%, transparent);
  --line-soft:      color-mix(in srgb, var(--fg) 7%, transparent);
  --selection:      var(--accent);
  --selection-fg:   #0b0b0c;

  /* ---- Type ---- */
  --font-sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Emphasis rides the width axis, not a slant. Archivo is variable
     (wdth 75–125) and the layout already uses that axis, so a stressed
     word opens up instead of leaning over: same family, same weight,
     same colour, wider cut. Body text sits at wdth 100. */
  --em-wdth:    122;

  /* El énfasis se pinta en el color de acento, sólido: verde lima en
     oscuro y azul en claro. La anchura hace el resto. */

  /* Fluid scale — clamp(min, preferred, max) */
  --t-mono:     clamp(0.62rem, 0.55rem + 0.25vw, 0.75rem);
  --t-body:     clamp(1rem, 0.94rem + 0.28vw, 1.15rem);
  --t-lead:     clamp(1.25rem, 1.05rem + 0.9vw, 2rem);
  --t-h3:       clamp(1.6rem, 1.2rem + 1.8vw, 2.8rem);
  --t-h2:       clamp(2.4rem, 1.4rem + 4.4vw, 6rem);
  --t-h1:       clamp(2.8rem, 0.9rem + 8.4vw, 9.5rem);
  --t-giant:    clamp(3.2rem, 0.6rem + 13vw, 15rem);

  --lh-tight:   0.88;
  --lh-snug:    1.06;
  --lh-body:    1.55;
  --tr-tight:   -0.035em;
  --tr-wide:    0.14em;

  /* ---- Space ---- */
  --gutter:     clamp(1.15rem, 0.6rem + 2.4vw, 4.5rem);
  --section:    clamp(5.5rem, 3rem + 11vw, 14rem);
  --stack:      clamp(1rem, 0.6rem + 1.4vw, 2.25rem);
  --radius:     14px;
  --radius-lg:  26px;
  --maxw:       1680px;

  /* ---- Motion ---- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);      /* out-expo-ish */
  --ease-inout:  cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft:   cubic-bezier(0.33, 1, 0.68, 1);
  --dur-xs:  0.18s;
  --dur-s:   0.32s;
  --dur-m:   0.6s;
  --dur-l:   0.95s;
  --dur-xl:  1.4s;

  --header-h: clamp(64px, 5vw, 92px);
}

/* ---- Light theme: flips the same tokens ---- */
[data-theme="light"] {
  --bg:        #eeeae3;
  --bg-raised: #e4dfd6;
  --fg:        #0f0f10;
  --fg-dim:    #6b675f;
  --accent:    #1f4dff;
  /* The three discipline colours go one step deeper on cream so a
     solid tag still separates from the page. */
  --c-ux:      #c6e400;
  --c-front:   #35c6ec;
  --c-graphic: #ff6a33;
  /* El naranja cálido se usa como texto —el aviso de límites de la página
     de IA—, y sobre crema el tono oscuro se queda en 2,3:1. Aquí baja a un
     terracota que da 5,2:1 contra la superficie elevada. */
  --accent-warm: #a33208;
  --line:      color-mix(in srgb, var(--fg) 16%, transparent);
  --line-soft: color-mix(in srgb, var(--fg) 9%, transparent);
  --selection-fg: #ffffff;
  color-scheme: light;
}

/* Wider hit areas + calmer type on coarse pointers */
@media (pointer: coarse) {
  :root { --lh-tight: 0.94; }
}