/* =============================================================
   SG — Token layer
   =============================================================
   The single source of truth for colour, surface, radius, shadow
   and type across every SG interface, whatever renders it:
   Django templates, plain HTML pages, or React.

   Two kinds of token live here:

   1. STATIC tokens (this file). Neutrals, surfaces, radii, shadows,
      spacing, type. They do not change at runtime.
   2. ACCENT tokens (--sg-primary and its ladder). Those are
      GENERATED, not written by hand — buildThemeTokens() in
      src/lib/interfaceSettings.ts derives the whole scale in HSL
      from one seed colour and sets it on <html>. The values below
      are only the shipped default, so a page still renders correctly
      before the accent is applied.

   Rule for consumers: read tokens, never hard-code a hex. A literal
   colour in a component is what strands a screen behind when the
   accent changes.
   ============================================================= */

:root {
  /* --- Accent: shipped default. Overridden at runtime on <html>. --- */
  --sg-primary: #1F2937;
  --sg-on-primary: #FFFFFF;
  --sg-primary-hover: #2B3B4E;
  --sg-primary-active: #131C26;
  --sg-primary-border: #C3CBD5;
  --sg-primary-soft: #F1F3F5;
  --sg-primary-shadow-soft: rgba(31, 41, 55, 0.08);
  --sg-primary-shadow: rgba(31, 41, 55, 0.15);
  --sg-primary-shadow-strong: rgba(31, 41, 55, 0.35);
  --sg-primary-50: #F1F3F5;
  --sg-primary-100: #E3E7EB;
  --sg-primary-200: #C3CBD5;
  --sg-primary-300: #9CA9B8;
  --sg-primary-400: #74879C;
  --sg-primary-500: #566A80;
  --sg-primary-600: #45566A;
  --sg-primary-700: #35424F;
  --sg-primary-800: #29333D;
  --sg-primary-900: #1C242C;

  /* --- Status. Bootstrap's semantics, kept so .btn-success and a
         status pill can never drift apart. --- */
  --sg-success: #198754;
  --sg-danger: #dc3545;
  --sg-warning: #ffc107;
  --sg-info: #0dcaf0;

  /* --- Radius ---
     Measured from the the reference app screens that actually SHIP, not from
     its components/ui/*.tsx — those are shadcn scaffolding that no
     page imports. The live pages style their controls with inline
     style objects, and these are their numbers. */
  /* RADIUS_SM / MD / LG from dashboardConfig.ts — the reference's own
     design-token block, which is the authority over any single page. */
  --sg-radius-sm: 8px;      /* RADIUS_SM: inputs, buttons, tabs */
  --sg-radius-input: 8px;
  --sg-radius: 12px;        /* RADIUS_MD: summary cards, filter row */
  --sg-radius-card: 12px;
  --sg-radius-lg: 18px;     /* RADIUS_LG: panels */
  --sg-radius-pill: 999px;

  /* --- Elevation. Tinted with the page's own neutral rather than
         flat black, which is what keeps a card from looking grey. --- */
  /* SHADOW_CARD / SHADOW_PANEL, verbatim. Both are TWO layers: a tight
     contact shadow plus a wide soft one. A single blurred shadow is what
     makes a card look like it is floating rather than resting. */
  --sg-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.06);
  --sg-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
  --sg-shadow-md: 0 1px 4px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.05);
  --sg-shadow: 0 6px 16px rgba(17, 24, 39, 0.07);
  --sg-shadow-md: 0 8px 18px rgba(15, 23, 42, 0.14);
  --sg-shadow-lg: 0 10px 22px rgba(17, 24, 39, 0.11);

  /* --- Spacing scale. The 4px grid the pages already follow. --- */
  --sg-space-1: 4px;
  --sg-space-2: 8px;
  --sg-space-3: 12px;
  --sg-space-4: 16px;
  --sg-space-5: 18px;
  --sg-space-6: 24px;
  --sg-space-7: 28px;

  /* --- Type --- */
  --sg-font-sans: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* Tailwind's scale, because that is the scale the reference app is
     built on. The first pass used 12.5/13/14/16, which put every label
     and caption a pixel or two off its counterpart in the reference app —
     individually invisible, collectively "not the same components".
     text-sm (14px) is the workhorse: controls, labels, body. */
  /* Measured from the shipped pages: hints are 12px, labels and card
     subtitles 13px, control text 14px, card titles 17px. */
  /* The reference uses TEN sizes in anger (10,11,12,13,14,15,16,18,20,22 —
     counted across every shipping file). This is the scale that survives;
     the migration map in SG › Decisões says which old value becomes which.
     15px and 17px are dropped: they are one-off outliers, and nobody can
     see the difference between 14 and 15 except as inconsistency. */
  --sg-text-2xs: 11px;   /* table headers, counters */
  --sg-text-xs: 12px;    /* labels, hints, captions */
  --sg-text-sm: 13px;    /* table body, secondary text */
  --sg-text-base: 14px;  /* body, all controls */
  --sg-text-lg: 16px;    /* card titles */
  --sg-text-xl: 18px;    /* section headings */
  --sg-text-2xl: 22px;   /* display */
  --sg-stat-number: 25px;

  /* Hero and stat headings scale with the viewport instead of
     switching at a breakpoint — a long Portuguese title wraps to
     three lines on a 360px phone otherwise. */
  --sg-hero-title: clamp(18px, 4.6vw, 25.6px);
  --sg-hero-subtitle: clamp(12.5px, 3.4vw, 14px);

  /* --- Control metrics ---
     The reference sizes every control off one scale: h-8 / h-9 / h-10.
     Bootstrap's own default is 38px with 16px text, which is why the
     first pass looked close but never right. */
  --sg-control-h-sm: 32px;
  /* Fixed on purpose. A native <select>, an <input> and a <button> with the
     same padding do NOT come out the same height, and in a filter row that
     showed: the box beside it sat a few pixels lower and the labels stopped
     lining up. ui.input pins 40px with a 38px line-height. */
  --sg-control-h: 40px;
  --sg-control-h-lg: 44px;
  --sg-control-px: 12px;
  --sg-focus-ring: 3px;

  /* --- Layout --- */
  --sg-sidebar-width: 278px;
}

/* =============================================================
   Tema
   =============================================================
   SG ships ONE theme. `data-theme="claro"` is set on <html> for
   explicitness, and a document that never sets it gets the same
   palette anyway — a page can never render unstyled by forgetting.
   ============================================================= */

/* The neutral ramp is SLATE, taken from the reference app's own
   index.css — background/foreground/muted/border are its values, not a
   generic grey. This is the difference people see without being able to
   name it: a slate-bordered field next to a grey-bordered one reads as
   two different design systems even at identical sizes. */
:root,
[data-theme="claro"] {
  --sg-bg: #FFFFFF;
  --sg-bg-secondary: #F8FAFC;
  --sg-bg-tertiary: #F1F5F9;
  --sg-text: #0F172A;           /* inputStyle.color */
  --sg-text-body: #1E293B;      /* tdStyle.color */
  --sg-text-secondary: #475569; /* fieldLabel.color */
  --sg-text-muted: #64748B;    /* ui.th, ui.summaryLabel */
  --sg-text-subtle: #94A3B8;   /* ui.muted, ui.emptyCell */
  /* Three borders, because the reference genuinely uses three: cards
     are #dce3ec, inputs #d8e0ea, and the tab bar #e2e8f0. Collapsing
     them to one value is a small thing that reads as "not our app". */
  --sg-border: #E2E8F0;
  --sg-card-border: #F1F5F9;   /* ui.panel / ui.summaryCard border */
  --sg-divider: #F1F5F9;       /* panelHeader.borderBottom */
  --sg-surface: #FFFFFF;
  --sg-input-bg: #FFFFFF;
  --sg-input-border: #E2E8F0;  /* inputStyle.border */
  --sg-ring: var(--sg-primary);
  --sg-sidebar-bg: #FFFFFF;
  --sg-sidebar-hover: #F1F5F9;
  --sg-sidebar-active-bg: #0F172A;
  --sg-sidebar-active-text: #F8FAFC;
  --sg-footer-bg: #F8FAFC;
}

/* The dark palette: the slate ramp continued, not a second design.
   -------------------------------------------------------------
   NOT SHIPPED, ON PURPOSE. There is no theme switch in the SG
   toolbar and no app turns this on today, so treat it as dormant
   rather than as a supported surface — it is kept because throwing
   it away means rebuilding it from nothing the day it is wanted.

   To try it, set data-theme="escuro" on <html> by hand. If it is
   ever adopted, it needs a real review first: these values have
   never been checked for contrast against the accent ladder. */
[data-theme="escuro"] {
  --sg-bg: #0F172A;
  --sg-bg-secondary: #1E293B;
  --sg-bg-tertiary: #334155;
  --sg-text: #F8FAFC;
  --sg-text-secondary: #CBD5E1;
  --sg-text-muted: #94A3B8;
  --sg-border: #334155;
  --sg-surface: #1E293B;
  --sg-input-bg: rgba(51, 65, 85, 0.3);
  --sg-input-border: #334155;
  --sg-ring: #CBD5E1;
  --sg-sidebar-bg: #020617;
  --sg-sidebar-hover: #1E293B;
  --sg-sidebar-active-bg: var(--sg-primary);
  --sg-sidebar-active-text: var(--sg-on-primary);
  --sg-footer-bg: #020617;
}

/* Bootstrap sets its own body font and size through --bs-* variables, and
   a rule that only styles `body` leaves every component it owns (buttons,
   inputs, tables, dropdowns) on Bootstrap's system stack. Pointing the
   variables themselves is what makes the whole page one typeface. */
:root {
  --bs-body-font-family: var(--sg-font-sans);
  --bs-body-font-size: var(--sg-text-sm);
  --bs-body-color: var(--sg-text);
  --bs-body-bg: var(--sg-bg);
  --bs-border-color: var(--sg-border);
  --bs-border-radius: var(--sg-radius-sm);
  --bs-font-sans-serif: var(--sg-font-sans);
}

body {
  font-family: var(--sg-font-sans);
  font-size: var(--sg-text-sm);
  background-color: var(--sg-bg);
  color: var(--sg-text);
}

/* -------------------------------------------------------------
   Documentação por stack
   -------------------------------------------------------------
   O interruptor Stack põe data-stack no <html>. Os guias marcam
   os blocos com .sg-django / .sg-react e o que não se aplica sai
   do caminho — em vez de cada leitor ter de saltar metade da
   página para encontrar a sua metade.
   ------------------------------------------------------------- */
[data-stack='react'] .sg-django,
[data-stack='django'] .sg-react { display: none; }

/* Em modo Django, o "Show code" do Storybook sai do caminho: emite JSX, que é
   a língua errada para metade dos leitores. O painel HTML/Django que o
   decorador põe por baixo de cada story ocupa o lugar dele.

   `sbdocs-preview-actions` é a barra que contém esse botão. É uma classe
   estável do Storybook, ao contrário das `css-xxxx` geradas ao lado dela. */
[data-stack='django'] .sbdocs-preview-actions,
[data-stack='django'] .docblock-source {
  display: none;
}