/* Tokens de la web de BrushLock. Los colores están en hexadecimal sRGB (convertidos desde
 * OKLCH): en pantallas de gama ancha un OKLCH se puede pintar con otro perfil según la
 * capa del navegador y dejaba dos tonos de fondo. Ej.: papel = oklch(96.4% 0.005 255).
 * Salen de `Palette` y `Kind` de la app
 * (Sources/App/Design/Theme.swift): porcelana fría, tinta con matiz azul, verde
 * azulado = libre, ámbar = la app espera algo de ti. El color significa; no
 * decora. */
:root {
  color-scheme: light dark;

  /* Papel y tinta — neutros fríos, ninguno con croma cero */
  --color-paper:    #f1f3f6;
  --color-paper-2:  #fafcfe;
  --color-rule:     #dde2e6;
  --color-muted:    #5f6772;
  --color-ink:      #11141a;

  /* Dos acentos con significado */
  --color-mint:     #00a48c;   /* libre / cumplido */
  --color-mint-ink: #006657;   /* mint apto para texto sobre papel */
  --color-amber:    #ad7300;    /* bloqueado / espera */
  --color-amber-ink:#7f4e07;
  --color-focus:    #008972;

  --shadow-lift: 0 30px 60px -28px rgb(17 20 26 / 0.28);

  --font-display: "Bricolage Grotesque", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;

  /* Escala 1.25 */
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1.0625rem;
  --text-lg:   1.3rem;
  --text-xl:   1.625rem;
  --text-2xl:  clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
  --text-display: clamp(2.75rem, 1.3rem + 6vw, 5.6rem);

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --rule-hair: 1px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
  --dur-zoom:  1100ms;

  --page-max: 76rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --nav-h: 64px;

  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-nav: 500;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:    #08090c;
    --color-paper-2:  #121418;
    --color-rule:     #26292e;
    --color-muted:    #9199a5;
    --color-ink:      #eff2f5;
    --color-mint:     #1bd4b7;
    --color-mint-ink: #43d9be;
    --color-amber:    #e5a83a;
    --color-amber-ink:#ebb353;
    --color-focus:    #1bd4b7;
    --shadow-lift: 0 30px 60px -28px rgb(0 0 0 / 0.7);
  }
}