/* ============================================================
   VENTURA · COLOR TOKENS
   "Verde profundo, branco e luz." — the palette is austere on
   purpose: a near-black deep green, white, and a single
   iridescent gradient (cyan→periwinkle→pink→lime) used sparingly
   as the brand's one moment of color. V-Play owns a hot pink-red.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --ven-deep: #081E1D;        /* verde profundo — primary surface & ink */
  --ven-deep-2: #0C2A28;      /* raised dark surface */
  --ven-deep-3: #123A37;      /* dark hover / border on dark */
  --ven-white: #FFFFFF;

  /* ---- Iridescent gradient stops (the signature) ---- */
  --iris-cyan: #59FAFC;
  --iris-blue: #7482ED;
  --iris-pink: #EEC0DD;
  --iris-lime: #ECF4C5;

  /* The brand gradient. Linear is the default lockup treatment;
     the conic/orbit form ("órbitas") is the graphic motif. */
  --gradient-iris: linear-gradient(100deg, var(--iris-cyan) 0%, var(--iris-blue) 38%, var(--iris-pink) 72%, var(--iris-lime) 100%);
  --gradient-iris-soft: linear-gradient(135deg, #6FE9F4 0%, #8F9BF0 45%, #EEC0DD 100%); /* @kind color */
  --gradient-orbit: conic-gradient(from 210deg at 50% 50%, var(--iris-cyan), var(--iris-blue), var(--iris-pink), var(--iris-lime), var(--iris-cyan));

  /* ---- V-Play (streaming sub-brand) ---- */
  --vplay-pink: #FF004C;
  --vplay-pink-press: #D60040;
  --vplay-ink: #0A0E18;       /* vplay app near-black (cooler than ven-deep) */

  /* ---- Neutral ramp (cool, tuned to the deep green) ---- */
  --neutral-0: #FFFFFF;
  --neutral-50: #F3F6F5;
  --neutral-100: #E7ECEB;
  --neutral-200: #CFD8D6;
  --neutral-300: #AAB7B4;
  --neutral-400: #7E8E8B;
  --neutral-500: #5A6967;
  --neutral-600: #3E4D4B;
  --neutral-700: #243531;
  --neutral-800: #122422;
  --neutral-900: #081E1D;

  /* ---- Semantic state ---- */
  --state-success: #2FBF89;
  --state-warning: #F2B34B;
  --state-danger: #E5484D;
  --state-info: var(--iris-blue);

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components / UI
     Default theme = LIGHT surface, deep-green ink.
     ============================================================ */
  --bg-page: var(--neutral-50);
  --bg-surface: var(--ven-white);
  --bg-surface-raised: var(--ven-white);
  --bg-sunken: var(--neutral-100);
  --bg-inverse: var(--ven-deep);

  --text-strong: var(--ven-deep);
  --text-body: #1C2C2A;
  --text-muted: var(--neutral-500);
  --text-faint: var(--neutral-400);
  --text-on-dark: var(--ven-white);
  --text-on-dark-muted: #9DB3AF;
  --text-on-accent: var(--ven-deep);

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-on-dark: rgba(255,255,255,0.14);

  --accent: var(--ven-deep);            /* primary action = deep green on light */
  --accent-contrast: var(--ven-white);
  --focus-ring: color-mix(in oklab, var(--iris-blue) 70%, white);

  --link: #15605A;
}

/* ============================================================
   DARK THEME — the brand's native home (deep green ground).
   Apply to any subtree with [data-theme="dark"].
   ============================================================ */
[data-theme="dark"] {
  --bg-page: var(--ven-deep);
  --bg-surface: var(--ven-deep-2);
  --bg-surface-raised: #103330;
  --bg-sunken: #061715;
  --bg-inverse: var(--ven-white);

  --text-strong: var(--ven-white);
  --text-body: #DCE8E6;
  --text-muted: #9DB3AF;
  --text-faint: #6E8581;
  --text-on-accent: var(--ven-deep);

  --border-subtle: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.20);

  --accent: var(--ven-white);
  --accent-contrast: var(--ven-deep);
  --link: var(--iris-cyan);
}

/* V-Play theme scope — streaming surfaces */
[data-theme="vplay"] {
  --bg-page: var(--vplay-ink);
  --bg-surface: #131826;
  --bg-surface-raised: #1B2233;
  --bg-sunken: #0A0E18;
  --text-strong: var(--ven-white);
  --text-body: #D7DBE6;
  --text-muted: #8B93A7;
  --text-faint: #5C6479;
  --border-subtle: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.18);
  --accent: var(--vplay-pink);
  --accent-contrast: var(--ven-white);
  --text-on-accent: var(--ven-white);
  --focus-ring: var(--vplay-pink);
  --link: var(--vplay-pink);
}