/* ============================================================
   SADALLA · COLOR TOKENS
   "Azul é a identidade; amarelo é micro-acento."
   Two coherent worlds: BRIGHT (white + blue) and DARK (abyssal/black + blue rim).
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --sad-blue: #1F3BFF;        /* Azul SADALLA — signature electric blue */
  --sad-blue-deep: #1430D6;   /* pressed / darker blue */
  --sad-blue-bright: #4E63FF; /* hover / lighter blue */
  --sad-abyssal: #08123A;     /* Azul Abissal — deep cinematic navy */
  --sad-black: #0A0A0A;       /* stage black / negative */
  --sad-white: #FFFFFF;       /* bright ground / collage */
  --sad-offwhite: #F4F2EC;    /* editorial warm off-white (craft) */
  --sad-acid: #FFE100;        /* Amarelo Acid — emblem + micro-accent ONLY */

  /* ---- Neutral ramp (cool, engineered grays toward abyssal) ---- */
  --sad-ink-900: #0A0A0A;
  --sad-ink-800: #14172B;
  --sad-ink-700: #1E2440;
  --sad-ink-600: #2C3354;
  --sad-ink-500: #4A5270;
  --sad-ink-400: #6E7790;
  --sad-ink-300: #9AA1B5;
  --sad-ink-200: #C7CBD8;
  --sad-ink-100: #E6E8EF;
  --sad-ink-050: #F3F4F8;

  /* ---- Functional accents (kept rare, engineered) ---- */
  --sad-positive: #1FB872;
  --sad-warning: #FFB020;
  --sad-danger: #E5484D;

  /* ============================================================
     SEMANTIC ALIASES — default theme is BRIGHT
     ============================================================ */
  --surface-page: var(--sad-white);
  --surface-raised: var(--sad-offwhite);
  --surface-card: var(--sad-white);
  --surface-inverse: var(--sad-abyssal);
  --surface-stage: var(--sad-black);

  --text-strong: var(--sad-black);
  --text-body: var(--sad-ink-700);
  --text-muted: var(--sad-ink-400);
  --text-on-blue: var(--sad-white);
  --text-on-dark: var(--sad-white);
  --text-accent: var(--sad-blue);

  --border-hairline: var(--sad-ink-100);
  --border-strong: var(--sad-ink-900);
  --border-blue: var(--sad-blue);

  --action-primary: var(--sad-blue);
  --action-primary-hover: var(--sad-blue-bright);
  --action-primary-press: var(--sad-blue-deep);
  --focus-ring: var(--sad-blue);

  --accent-acid: var(--sad-acid);
}

/* ============================================================
   DARK THEME — abyssal/black ground, blue rim light
   Apply with: <div data-theme="dark"> or class .theme-dark
   ============================================================ */
[data-theme="dark"],
.theme-dark {
  --surface-page: var(--sad-abyssal);
  --surface-raised: #0C173F;
  --surface-card: #0C173F;
  --surface-inverse: var(--sad-offwhite);
  --surface-stage: var(--sad-black);

  --text-strong: var(--sad-white);
  --text-body: var(--sad-ink-200);
  --text-muted: var(--sad-ink-400);
  --text-accent: var(--sad-blue-bright);

  --border-hairline: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.85);

  --action-primary: var(--sad-blue);
  --action-primary-hover: var(--sad-blue-bright);
  --action-primary-press: var(--sad-blue-deep);
}