/* "Cinza grafite" with a cyan accent ("Ciano neon", owner's final choice on
   10/11, matching the SeinovFlow logo). Overrides only color tokens.
   Light and dark live together through light-dark(): first value light, second dark.
   The scheme follows the system (prefers-color-scheme) unless <html data-scheme="light|dark">
   pins it; js/theme.js sets that attribute and remembers the manual choice.
   Browsers without light-dark() skip this block and keep the light defaults in tokens.css.
   The accent lives in ONE token (--color-accent); focus ring follows it. To go back to the grey
   accent, swap that single line for: light-dark(#3A3C40, #CFD2D6). */
@supports (color: light-dark(#000000, #ffffff)) {
  [data-theme="grafite"] {
    color-scheme: light dark;

    --color-bg: light-dark(#DEDFE1, #1C1D1F);
    --color-surface: light-dark(#FFFFFF, #26272A);
    --color-surface-alt: light-dark(#F2F3F4, #2E2F33);
    --color-surface-strong: light-dark(#2A2B2E, #303135);
    --color-tabbar: light-dark(#D2D3D5, #141516);
    --color-sidebar: light-dark(#EAEAEC, #1F2023); /* SeinovFlow side menu */
    --color-border: light-dark(#D5D6D9, #37383C);
    --color-border-strong: light-dark(#A3A6AB, #66686E);
    --color-ink: light-dark(#141516, #F0F0F1);
    --color-ink-muted: light-dark(#4F5155, #ABADB1);
    --color-ink-subtle: light-dark(#5C5F63, #979A9E);
    --color-ink-inverse: light-dark(#F2F2F3, #F4F4F5);
    --color-accent: light-dark(#0B6B85, #5ED6EE); /* cyan; grey: light-dark(#3A3C40, #CFD2D6) */
    /* Neon gradient of the logo's FLOW, used on the main figure (ROAS). Light mode is a bit darker for legibility. */
    --color-brand-from: light-dark(#0B8FB0, #2BE4F2);
    --color-brand-to: light-dark(#1D4FC4, #2F6BFF);
    --color-positive: light-dark(#2D6A4A, #74C79C);
    --color-warning: light-dark(#B4401A, #F08A5D);
    --color-warning-soft: light-dark(#FBECE6, #3A231B);
    --color-danger: light-dark(#B4401A, #F08A5D);
    --color-focus: var(--color-accent);

    --color-hero-ink-muted: light-dark(#A7A9AD, #B5B7BB);
    --color-hero-ink-subtle: light-dark(#979A9E, #A5A8AC);
    --color-hero-border: light-dark(#3A3B3F, #45474C);
    /* On the hero card (dark in both schemes): fixed, they do not follow the scheme. */
    --color-hero-accent: #5ED6EE;
    --color-hero-action: light-dark(#F2F2F3, #F4F4F5);
    --color-hero-action-ink: #141516;
    --color-scrim: light-dark(rgb(20 21 22 / 0.28), rgb(0 0 0 / 0.55));
    /* Sales map ramp, few -> many (dark: the light end is the most sales, against #26272A). */
    --color-map-0: light-dark(#E6E7E9, #303135);
    --color-map-1: light-dark(#72BFD6, #2D7088);
    --color-map-2: light-dark(#4AA8C6, #3189A4);
    --color-map-3: light-dark(#278AAB, #3EA5C1);
    --color-map-4: light-dark(#156B89, #5BC3DC);
    --color-map-5: light-dark(#0A4C62, #A2E8F5);
    /* Over pictures: the same in both schemes (pictures carry their own light). */
    --color-media-scrim: rgb(12 13 14 / 0.62);
    --color-media-ink: #F4F4F5;
    --color-media-fade: rgb(12 13 14 / 0.55);
    --color-media-label: #141517;
    --color-accent-soft: color-mix(in srgb, var(--color-accent) 13%, transparent);
    --color-accent-line: color-mix(in srgb, var(--color-accent) 55%, transparent);
  }

  [data-theme="grafite"][data-scheme="light"] {
    color-scheme: light;
  }

  [data-theme="grafite"][data-scheme="dark"] {
    color-scheme: dark;
  }
}