/* ============================================================
   RAYO · DESIGN SYSTEM · TOKENS
   Sistema multimarca. Base compartida + un tema por marca.
   Paletas elegidas por Maria Paula (curadas de referencias reales).
   ============================================================ */

:root{
  /* ---------- TIPOGRAFÍA ---------- */
  /* Instrument Sans hace el trabajo principal. Newsreader itálica es una
     voz exclusiva de Rayolab para la cola del logo, citas y énfasis puntuales. */
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-text:    "Instrument Sans", system-ui, sans-serif;
  --font-serif:   "Newsreader", Georgia, serif;
  --font-mono:    ui-monospace, Menlo, monospace;

  /* Escala tipográfica (ratio 1.25, base 17px) */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 17px;
  --t-md:   21px;
  --t-lg:   26px;
  --t-xl:   33px;
  --t-2xl:  41px;
  --t-3xl:  56px;
  --t-4xl:  clamp(44px, 7vw, 80px);

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.55;

  --ls-tight: -0.03em;
  --ls-snug:  -0.015em;
  --ls-wide:  0.14em;   /* para micro-textos en mayúsculas */

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  /* ---------- ESPACIADO (escala de 4) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ---------- FORMA ---------- */
  /* Suave pero no infantil: radios contenidos, nada de píldoras por defecto. */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-full: 999px;
  --line-w: 1px;

  /* ---------- CONTENEDOR ---------- */
  --container: 1080px;
  --gutter: var(--s-5);

  /* ---------- MOVIMIENTO ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .18s;

  /* ---------- SEMÁNTICOS ---------- */
  /* Separados del acento de marca a propósito: "peligro" no puede cambiar
     de significado según la marca que esté activa. */
  --ok:    #3B6E4A;
  --warn:  #8A6320;
  --error: #9A3630;
  --on-error: #FFFFFF;  /* texto sobre --error */

  /* ---------- TEXTURA ---------- */
  /* Grano fino y casi invisible: se nota como textura de papel, no como
     ruido. stitchTiles evita que se vea la costura al repetirse, y el
     saturate 0 lo deja neutro para que no ensucie el color de la marca. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --grain-opacity: .035;
  /* Halo como luz que entra por arriba, no como niebla centrada.
     Dos focos muy tenues, uno alto y otro bajo, para dar profundidad. */
  --halo: radial-gradient(95% 70% at 50% -12%,
            color-mix(in oklab, var(--accent) 9%, transparent) 0%, transparent 62%),
          radial-gradient(65% 55% at 88% 108%,
            color-mix(in oklab, var(--accent) 6%, transparent) 0%, transparent 58%);

  /* ---------- BREAKPOINTS (de referencia, para media queries) ---------- */
  --bp-sm: 480px;  --bp-md: 768px;  --bp-lg: 1024px;
}

/* ============================================================
   TEMAS DE MARCA
   Cada marca comparte la estructura: base blanca, tono medio
   apagado, acento profundo desaturado y tinta con temperatura.
   ============================================================ */

/* --- RAYO STUDIO · ciruela nocturna (premium, misteriosa) --- */
[data-brand="studio"]{
  --bg:      #FFFFFF;  /* blanco base */
  --surface: #F8F6FB;  /* superficie · tinte ciruela mínimo */
  --soft:    #CFC9DA;  /* violeta suave */
  --muted:   #66606D;  /* gris violáceo (texto secundario) */
  --accent:  #2A1F4C;  /* ciruela */
  --ink:     #1A152F;  /* ciruela profunda (texto) */
  --line:    #D1C8E1;
  --on-accent: #FFFFFF;
  --brand-name: "rayo studio";
}

/* --- RAYO LAB · oliva clásico (sereno, de club) --- */
[data-brand="lab"]{
  --bg:      #FFFFFF;
  --surface: #F6F8F5;
  --soft:    #B7BFB2;
  --muted:   #636A55;  /* oscurecido para pasar AA (4.57:1) */
  --accent:  #506466;
  --ink:     #1F1A16;
  --line:    #C4CFBE;
  --on-accent: #FFFFFF;
  --brand-name: "rayo lab";
}

/* --- NOSECOMOUSARLAIA · blanco y verde (claro, cercano) --- */
/* Dos verdes a proposito: el de marca da 3.27:1 sobre blanco, suficiente
   para el logotipo y elementos grandes pero no para texto. Para texto y
   controles va el oscuro (5.74:1, pasa AA). */
[data-brand="nose"]{
  --bg:      #FFFFFF;
  --surface: #F5FAF6;
  --soft:    #C7DCCB;
  --muted:   #616B5F;  /* oscurecido para pasar AA (4.57:1) */
  --accent:  #43A05E;  /* acento de marca · verde del logotipo (más claro) */
  --accent-texto: #2F7346;  /* verde oscuro · para texto pequeño donde #43A05E no pasa AA */
  --brand-green: #43A05E;  /* verde del logotipo · display */
  --brand-green-dark: #5FBE7A;  /* el mismo, aclarado para fondo oscuro */
  --ink:     #23301F;
  --line:    #B9D3BE;
  --on-accent: #FFFFFF;
  --brand-name: "nosecomousarlaia";
}

/* Fallback: si no hay marca declarada, usa studio */
:root:not([data-brand]){
  --bg:#FFFFFF; --surface:#F8F6FB; --soft:#CFC9DA; --muted:#66606D;
  --accent:#2A1F4C; --ink:#1A152F; --line:#D1C8E1; --on-accent:#FFFFFF;
}

/* ============================================================
   TEMA OSCURO
   No es invertir: los fondos guardan la temperatura de cada marca
   (ciruela, oliva, verde) y los acentos se aclaran para no apagarse.
   Se activa con [data-theme="dark"], que gana sobre la preferencia
   del sistema en los dos sentidos.
   ============================================================ */

[data-brand="studio"][data-theme="dark"]{
  --bg:      #15111F;
  --surface: #1E1930;
  --soft:    #3A3252;
  --muted:   #A79EB8;
  --accent:  #B9A8F0;
  --ink:     #EFE9DC;
  --line:    #2C2540;
  --on-accent: #1A152F;
}

[data-brand="lab"][data-theme="dark"]{
  --bg:      #13150F;
  --surface: #1C1F17;
  --soft:    #343A2B;
  --muted:   #A3AC93;
  --accent:  #9DC0C2;
  --ink:     #EBE7D9;
  --line:    #272C1F;
  --on-accent: #12140F;
}

[data-brand="nose"][data-theme="dark"]{
  --bg:      #101510;
  --surface: #181E18;
  --soft:    #2B342B;
  --muted:   #9DA898;
  --accent:  #5FBE7A;
  --brand-green: #5FBE7A;  /* en oscuro el logotipo usa el verde claro */
  --ink:     #E8EBDD;
  --line:    #232B23;
  --on-accent: #0D1410;
}

/* En oscuro el grano se aplica en modo screen, así que necesita un poco
   más de opacidad para leerse igual de sutil. */
[data-theme="dark"]{ --grain-opacity: .055; }

/* Los semánticos también tienen que cambiar en oscuro: los tonos claros
   fallaban contraste (ok 2.84, warn 3.14, error 2.38 sobre superficie
   oscura). Aclarados pasan AA con holgura. */
[data-theme="dark"]{
  --ok:    #7FD196;
  --warn:  #E0B252;
  --error: #F08A82;
  --on-error: #2A0F0D;  /* texto sobre el rojo, que ahora es claro */
}