/* Design tokens. Spacing, radius, type and shadows are theme-neutral.
   Colors are named by role; each themes/<theme>.css overrides only the colors.
   This file and themes/ are the only places allowed to hold literal colors. */
:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Headings and big numbers; bundled in ui/fonts, falls back to the system font. */
  --font-display: "Inter Tight", var(--font-sans);

  --font-size-2xs: 0.6875rem;   /* 11: keyboard chips */
  --font-size-xs: 0.75rem;      /* 12: stat labels, status lines, badges */
  --font-size-caption: 0.8125rem; /* 13: descriptions, links */
  --font-size-sm: 0.875rem;     /* 14: body */
  --font-size-body-lg: 0.9375rem; /* 15: support line, card titles, search */
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;      /* 20: hero stats */
  --font-size-xl: 2rem;         /* 32: headline on phones */
  --font-size-display: 2.75rem; /* 44: headline */

  --line-height-tight: 1.08;
  --line-height-body: 1.5;
  --tracking-display: -0.035em;
  --tracking-figure: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-14: 3.5rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-card: 14px;

  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.08);

  --duration-fast: 150ms;
  --duration-base: 200ms;

  /* Color roles. Defaults = "Cinza grafite" light; themes/<theme>.css overrides them. */
  --color-bg: #DEDFE1;              /* page background */
  --color-surface: #FFFFFF;         /* sheet: cards and panels over the background */
  --color-surface-alt: #F2F3F4;     /* secondary sheet: rows, inputs, nested blocks */
  --color-surface-strong: #2A2B2E;  /* dark hero card (the SeinovFlow card) */
  --color-tabbar: #D2D3D5;          /* tab bar / navigation strip */
  --color-sidebar: #EAEAEC;         /* side menu of the SeinovFlow (between bg and surface) */
  --color-border: #D5D6D9;          /* hairlines and dividers on light surfaces */
  --color-border-strong: #A3A6AB;   /* stronger outline: the "Muito escalado" card */
  --color-ink: #141516;             /* primary text */
  --color-ink-muted: #4F5155;       /* secondary text */
  --color-ink-subtle: #5C5F63;      /* tertiary text: labels, captions, metadata */
  --color-ink-inverse: #F2F2F3;     /* text on surface-strong (hero card) */
  --color-accent: #0B6B85;          /* single accent (cyan; grey was #3A3C40): ROAS, links, active */
  --color-positive: #2D6A4A;        /* gains, success */
  --color-warning: #B4401A;         /* needs attention (palette "alert") */
  --color-warning-soft: #FBECE6;    /* background of attention badges */
  --color-danger: #B4401A;          /* errors; same tone as warning in this palette */
  --color-focus: var(--color-accent); /* focus ring follows the accent */

  /* Hero card (dark card) group; hero-bg/hero-ink alias the strong surface and its ink. */
  --color-hero-bg: var(--color-surface-strong);    /* hero card background */
  --color-hero-ink: var(--color-ink-inverse);      /* hero primary text */
  --color-hero-ink-muted: #A7A9AD;  /* hero secondary text */
  --color-hero-ink-subtle: #979A9E; /* hero labels (stat names) */
  --color-hero-border: #3A3B3F;     /* hero dividers */
  /* The hero card is dark in both schemes, so what sits on it does not follow the scheme. */
  --color-hero-accent: #5ED6EE;     /* accent on the hero: ROAS, focus ring (the dark-scheme cyan) */
  --color-hero-action: #F2F2F3;     /* neutral main button on the hero ("Abrir o SeinovFlow") */
  --color-hero-action-ink: #141516; /* text of that button */

  /* Gradient of the logo's FLOW (monogram F, loader); themes/ adapts it to the scheme. */
  --color-brand-from: #0B8FB0;
  --color-brand-to: #1D4FC4;

  --color-scrim: rgb(0 0 0 / 0.32); /* backdrop behind the command palette */

  /* Sales map (SeinovFlow home): one-hue sequential ramp, few -> many sales; 0 = no sale.
     Validated with the dataviz checker (ordinal: one hue, monotone lightness, step gaps,
     light end >= 2:1 against the sheet) in both schemes. */
  --color-map-0: #E6E7E9;
  --color-map-1: #72BFD6;
  --color-map-2: #4AA8C6;
  --color-map-3: #278AAB;
  --color-map-4: #156B89;
  --color-map-5: #0A4C62;

  /* Over pictures and videos (creative thumbnails): dark in both schemes, like the hero card. */
  --color-media-scrim: rgb(12 13 14 / 0.62); /* round buttons and badges over a picture */
  --color-media-ink: #F4F4F5;                 /* text and icons over a picture */
  --color-media-fade: rgb(12 13 14 / 0.55);   /* bottom fade that keeps the duration legible */
  --color-media-label: #141517;               /* solid label over a picture ("Muito escalado") */
  /* Accent tints for pressed chips and "very scaled" badges; they follow --color-accent. */
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 13%, transparent);
  --color-accent-line: color-mix(in srgb, var(--color-accent) 55%, transparent);
}