/* Palette, elevation, radius, type and spacing — everything else reads these. */
:root{
  /* Brand */
  --primary-color:      #8B2635;
  --primary-color-dark: #6E1D2A;
  --primary-tint:       rgba(139, 38, 53, 0.09);
  --primary-border:     rgba(139, 38, 53, 0.28);
  --primary-glow:       0 0 0 3px rgba(139, 38, 53, 0.12);
  --primary-color-soft: #9C2E2E;

  /* Accent — the second series in every two-series chart, and the Pesquisa home
     card. It is not a third brand colour and never paints a surface the sidebar
     or a button already owns; a two-slice donut reads wine-vs-teal with no
     legend, which is the whole reason it exists. `-dark` carries the text and
     the stroke, `--accent-color` the fill. */
  --accent-color:       #4C8C86;
  --accent-color-dark:  #3C6F6A;

  /* On a brand-coloured surface — the sidebar, the mobile header, the login
     screen. White at three opacities and text at three weights is the whole
     hierarchy those surfaces have: none of the greys above are legible on them,
     and a literal rgba(255,255,255,...) in a component file is how that scale
     ends up with eleven steps nobody chose. */
  --on-brand-text-muted: rgba(255, 255, 255, .78);
  --on-brand-text-faint: rgba(255, 255, 255, .55);
  --on-brand-fill-1:     rgba(255, 255, 255, .10);
  --on-brand-fill-2:     rgba(255, 255, 255, .16);
  --on-brand-fill-3:     rgba(255, 255, 255, .24);
  --backdrop:            rgba(20, 10, 10, .45);

  /* Text */
  --text-color:         #2A2E33;
  /* Tuned (was #6B7280) so secondary text holds 4.5:1 on every neutral ground: 5.80 on
     --bg-card, 5.08 on --bg-color, 4.67 on --bg-alt. Same hue family, a step darker. */
  --text-secondary:     #5F6670;
  --text-muted:         #9AA1A8;
  --text-on-brand:      #FFFFFF;

  /* Surfaces */
  --bg-color:           #EEF0F2;
  --bg-alt:             #E4E7EA;
  --bg-card:            #FFFFFF;
  --bg-input:           #FCFCFD;
  --bg-input-focus:     #FFFFFF;
  --bg-hover:           #EEF0F2;

  /* Lines */
  --border-color:        #DBE0E4;
  --border-color-strong: #C7CDD3;
  --border-focus:        var(--primary-color);

  /* Status — active / pending / inactive / deleted */
  --status-completed:  #2F6F5C;
  --status-processing: #96600D;
  --status-pending:    #6B7280;
  --status-failed:     #B3331F;

  /* Quintiles — the one sequential scale in the system: the choropleth fill and
     the ranking table's chip, five wine-derived steps from lightest to darkest.
     Each `-ink` is the text colour measured legible on its own step (WCAG
     relative luminance, >= 4.5:1), not a colour picked by eye — steps 1-2 take
     --text-color, 4-5 take --text-on-brand. Step 3 is the exception: #BF6767
     sits at the crossover where neither white (3.92:1) nor any existing dark
     token (best 3.48:1) clears the bar, so it gets the only value in this file
     that is not already a token elsewhere — the ramp continued one step past
     --quintile-5. */
  --quintile-1: #F4DCDC;
  --quintile-2: #DFADAD;
  --quintile-3: #BF6767;
  --quintile-4: #952626;
  --quintile-5: #5C1414;
  --quintile-ink-1: var(--text-color);      /* 10.49:1 */
  --quintile-ink-2: var(--text-color);      /*  6.97:1 */
  --quintile-ink-3: #1F0A0A;                /*  4.84:1 */
  --quintile-ink-4: var(--text-on-brand);   /*  8.13:1 */
  --quintile-ink-5: var(--text-on-brand);   /* 13.42:1 */

  /* Elevation and motion */
  --shadow-sm: 0 1px 2px rgba(20,20,30,.06), 0 1px 1px rgba(20,20,30,.04);
  --shadow-md: 0 4px 14px rgba(20,20,30,.08);
  --shadow-lg: 0 14px 34px rgba(20,20,30,.16);
  --shadow-brand: 0 6px 16px rgba(139,38,53,.32);
  --ease: cubic-bezier(.2,.7,.3,1);
  --transition: .15s var(--ease);
  --transition-slow: .24s var(--ease);

  /* Radii */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-pill: 20px;

  /* Type */
  --font: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Code", monospace;
  --fs-xxs: 10.5px;
  --fs-xs:  11.5px;
  --fs-sm:  12.5px;
  --fs-base: 13.5px;
  --fs-md:  15px;
  --fs-lg:  20px;
  --fs-xl:  24px;
  --fs-2xl: 28px;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* Layout — three breakpoints used throughout static/css/pages/*.css:
     980px (nav switches from a persistent sidebar to an off-canvas one),
     780px (two-column layouts collapse to one), 560px (tightest mobile). */
  --mobile-header-height: 50px;
  --content-max: 1400px;
  --sidebar-width: 264px;
  /* The filter/axis rail shared by Pesquisa, Padronização, Indicadores and
     Relatórios (layout/shell.css, `.rail-layout`). A token rather than a calc so
     the four screens that use it read one name instead of arithmetic. */
  --rail-width: 240px;
  --sidebar-width-mobile: min(300px, 84vw);

  /* Literals the kit repeated, named once. A value is unchanged unless its comment
     says "was": those were snapped to the nearest step so the scale stays short. */
  --sp-half: 2px;           /* stacked nav and rail rows, badge padding */
  --sp-1-5:  6px;           /* label-to-input and icon-to-label gaps in compact controls */
  --sp-8:    64px;          /* empty-state padding, foot of the content column (was 60-70) */
  --size-dot: 6px;          /* the status-badge dot */
  --size-sm:  28px;         /* sidebar avatar */
  --size-md:  32px;         /* square icon buttons (sidebar close was 30, home-card icon 34) */
  --size-lg:  40px;         /* comfortable tap target (hamburger was 36, phone row actions 38) */
  --size-xl:  56px;         /* empty-state icon box (was 54) */
  --icon-md:  18px;         /* glyph inside a --size-md or --size-lg box */
  --icon-lg:  24px;         /* glyph inside the empty-state box */
  --focus-ring: 2px;        /* :focus-visible outline width and offset */
  --scrollbar-size: 8px;
  --measure:        720px;  /* longest page lead */
  --measure-narrow: 340px;  /* empty-state paragraph */
  --tooltip-max:    240px;
  --menu-min-width: 200px;
  --dialog-max:     380px;  /* confirm dialog and login card */
  --donut-size:     150px;
  --login-rings-size: 560px;

  /* Status fills: the status colour at 8% over a card, opaque so a badge reads the
     same on the page ground and on a card. 8%, not the former 14%: at 14% the
     processing badge measured 4.37:1; at 8% completed 5.30, processing 4.75,
     failed 5.44. Pending has no fill: its grey is 4.83:1 on white and falls under
     4.5:1 on any tint of itself. */
  --status-completed-tint:  color-mix(in srgb, var(--status-completed) 8%, var(--bg-card));
  --status-processing-tint: color-mix(in srgb, var(--status-processing) 8%, var(--bg-card));
  --status-failed-tint:     color-mix(in srgb, var(--status-failed) 8%, var(--bg-card));
}