/* tokens.css — single source of truth for color, spacing and radius.
   Fonts use the system stack only (no external fonts). */

:root {
  /* Tells the platform which way to draw what it still owns: the <select> popup,
     the date picker, scrollbars. Without it those stayed light-themed while the
     app was dark, which is most of why they read as borrowed. */
  color-scheme: light;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Brand blue — the exact hex the favicon's background gradient starts from,
     so the "Flow" in the wordmark and the app icon read as the same color.
     Deliberately NOT tied to --ui-accent: the wordmark is identity, not chrome.
     Keep this in sync with static/favicon.svg. */
  --brand:  #0A84FF;

  /* Semantic palette (fixed, theme-independent). These carry meaning — green is
     "closed", red is "lost" — so they never follow the user's accent choice. */
  --blue:   #007AFF;
  --green:  #34C759;
  --orange: #FF9500;
  --red:    #FF3B30;
  --purple: #AF52DE;
  --teal:   #5AC8FA;
  --gray:   #8E8E93;
  /* Seventh routine category. Picked by measurement, not taste: of the Apple
     system colours left, pink scored best against the six already in use — and
     then landed ΔE 21.9 from --red, which in this app means urgent/error/lost.
     A "Trabalho" block that reads as an alert is worse than a duller hue, so
     mint took it: ΔE 37 from its nearest neighbour and 130 from red. */
  --mint:   #00C7BE;

  /* --- Product-area series --------------------------------------------------
     Identity colours for the four consortium areas, in fixed order. Not the
     semantic palette above: --blue and --purple sit at ΔE 5.9 under protanopia
     and at 0.2 under deuteranopia, so on a pie the two largest areas were the
     same colour for a red-blind reader. These four were picked by running the
     dataviz palette validator over both surfaces — lightness band, chroma
     floor, CVD separation, normal-vision floor and contrast all pass, with the
     adjacent green/pink pair in the 6–8 relief band, which is why every slice
     is also named and valued in the list beside the chart. */
  --series-imovel:   #2E86D9;
  --series-auto:     #D55E00;
  --series-servicos: #0E9A6B;
  --series-outros:   #C2559A;

  /* --- User accent ---------------------------------------------------------
     The action/selection colour of the whole app. Stored as a hue so lightness
     can stay tuned per theme instead of one hex fighting both backgrounds.
     --ui-accent-ink is the text colour that sits ON the accent; appearance.js
     recomputes it from luminance, because white on a yellow accent is unreadable. */
  --accent-h: 217;
  --accent-s: 91%;
  --accent-l: 52%;
  --ui-accent:      hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --ui-accent-soft: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.16);
  --ui-accent-ink:  #fff;

  /* --- Background layers ---------------------------------------------------
     Colours are three-part HSL strings so they compose as hsl(var(--bg-c1) / .5)
     without any conversion step. Overwritten by appearance.js. */
  --bg-c1: 217 80% 62%;
  --bg-c2: 282 62% 58%;
  --bg-c3: 199 82% 66%;
  --bg-stops: hsl(var(--bg-c1)), hsl(var(--bg-c2)), hsl(var(--bg-c3));
  --bg-angle: 135deg;
  --bg-veil: 0.30;
  --bg-orb-opacity: 0.55;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Surfaces come in pairs: --panel/--sidebar are what components paint, and
   --panel-solid/--sidebar-solid are the opaque fallbacks the Vidro style needs
   when "reduce transparency" is on. The base values ARE the Instrumento style —
   opaque paper — so a missing data-theme-style attribute degrades to it. */
[data-theme="light"] {
  --bg-gradient: linear-gradient(160deg, #EEF2F8 0%, #F7F3EE 55%, #EDF1F6 100%);
  --panel-solid:   #FFFFFF;
  --sidebar-solid: #F6F6F8;
  --panel:         var(--panel-solid);
  --sidebar:       var(--sidebar-solid);
  --panel-border-solid: rgba(0, 0, 0, 0.08);
  --panel-border:  var(--panel-border-solid);
  /* Small surfaces that sit ON a panel and must read as raised: the selected
     segment of a control, a sticky form footer, a draggable card. Opaque under
     Instrumento, glass under Vidro. */
  --panel-raised:  var(--panel-solid);
  --text:          #1D1D1F;
  --text-2:        #6E6E73;
  --text-3:        #A1A1A6;
  --field:         rgba(0, 0, 0, 0.04);
  --shadow-card:   0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-pop:    0 12px 48px rgba(0,0,0,.18);
}

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

  --bg-gradient: linear-gradient(160deg, #1C1C1E 0%, #232326 55%, #1A1A1C 100%);
  --panel-solid:   #2C2C2E;
  --sidebar-solid: #1E1E20;
  --panel:         var(--panel-solid);
  --sidebar:       var(--sidebar-solid);
  --panel-border-solid: rgba(255, 255, 255, 0.10);
  --panel-border:  var(--panel-border-solid);
  --panel-raised:  var(--panel-solid);
  --text:          #F5F5F7;
  --text-2:        #A1A1A6;
  --text-3:        #6E6E73;
  --field:         rgba(255, 255, 255, 0.07);
  --shadow-card:   0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.35);
  --shadow-pop:    0 12px 48px rgba(0,0,0,.55);
  --accent-l: 62%;
}

/* --- Vidro ------------------------------------------------------------------
   Translucent surfaces that let the background layer through. --panel-blur only
   exists here, so every `backdrop-filter: var(--panel-blur, none)` in the app
   resolves to `none` under Instrumento with no conditional logic anywhere. */
[data-theme-style="vidro"] {
  /* These surfaces are as see-through as they are because the scrim behind them
     is solved for contrast (appearance.js), not guessed: the background arriving
     through the glass has already been pushed far enough from the text colour.
     Measured across theme x preset, body text clears 4.5:1 and the sidebar's
     faintest labels beat their opaque-Instrumento baseline. Loosen the scrim and
     these numbers go with it. */
  --panel:        rgba(255, 255, 255, 0.22);
  /* Raised surfaces move AWAY from the text colour, which means the two themes
     go in opposite directions: brighter here, smoked in the dark theme. Both
     separate the surface from the panel it sits on; only one of them keeps the
     label readable. Measured: 12.4:1 here, 5.9:1 there. */
  --panel-raised: rgba(255, 255, 255, 0.30);
  --panel-blur:   blur(24px) saturate(180%);
  /* Dark, not white. A white edge on a light background is not an edge — it is
     the reason the panels had no visible outline at all. The white specular of
     the rim then rides ON this dark base and reads as a break in it, which is
     what an edge of glass actually does in daylight. */
  --panel-border: rgba(0, 0, 0, 0.11);
  --sidebar:      rgba(255, 255, 255, 0.16);
  /* Same logic for the static bevel: the inner ring darkens, only the very top
     lip stays light. */
  --glass-lip:    rgba(255, 255, 255, 0.55);
  --glass-ring:   rgba(0, 0, 0, 0.14);
  --radius-lg: 24px;
  --radius-md: 18px;
  /* The inset band is not decoration: it darkens the bottom of the face so the
     surface falls off from top to bottom, and that falloff is most of what reads
     as a domed piece of glass rather than a flat tile. At the spec's -22px
     spread it never showed up at all — measured, the top and bottom of a card
     came out within one value of each other. */
  --shadow-card: 0 10px 40px rgba(0,0,0,.18), inset 0 -32px 44px -28px rgba(0,0,0,.22);
  /* Darker than the opaque scale, and this is the single biggest lever on how
     blown out the light theme looks. The scrim solver has exactly one move in
     the light theme — whiten the background until the secondary text clears its
     ratio — so a light --text-2 forces a heavy veil and washes every colour off
     the screen. At #58585C the solver needed the background at luminance 0.64,
     which is very nearly white; at #3C3C40 it needs 0.40 and the palette
     survives. */
  --text-2: #3C3C40;
  --text-3: #6B6B70;
}
[data-theme-style="vidro"][data-theme="dark"] {
  /* Frosted glass LIGHTENS what is behind it. A dark overlay here reads as a
     dark card sitting on top of the background — plastic, not glass — which is
     exactly what made the panels look wrong. The surface is white at low alpha
     in both themes; only the amount differs. */
  --panel:        rgba(255, 255, 255, 0.10);
  --panel-raised: rgba(0, 0, 0, 0.26);
  --glass-lip:    rgba(255, 255, 255, 0.17);
  --glass-ring:   rgba(255, 255, 255, 0.30);
  --sidebar:      rgba(255, 255, 255, 0.06);
  --panel-border: rgba(255, 255, 255, 0.18);
  /* Lifted again for the lighter surface: white glass over a dark background
     raises the plate toward the text instead of away from it, so the tones that
     cleared their baseline on a dark plate no longer do. Measured, not guessed. */
  --text-2: #D8D8DD;
  --text-3: #ABABB1;
  /* A dark inset that reads as volume on a dark plate reads as grime on a pastel
     one, so the light theme gets a gentler band and the dark theme keeps the
     depth. */
  --shadow-card: 0 10px 40px rgba(0,0,0,.28), inset 0 -32px 44px -28px rgba(0,0,0,.50);
}

/* Accessibility → Reduce transparency, same idea as macOS. Must come after the
   Vidro blocks: equal specificity, so source order decides. */
[data-theme-style="vidro"][data-reduce-transparency="1"] {
  --panel:        var(--panel-solid);
  --panel-raised: var(--panel-solid);
  --sidebar:      var(--sidebar-solid);
  --panel-border: var(--panel-border-solid);
  --panel-blur:   none;
}

/* Semantic accent by meaning — set --accent, consumed by chips, borders, dots.
   Unrelated to --ui-accent above: this one says "closed/lost/networking", that
   one says "this is the button you press". */
[data-color="blue"]   { --accent: var(--blue); }
[data-color="green"]  { --accent: var(--green); }
[data-color="orange"] { --accent: var(--orange); }
[data-color="red"]    { --accent: var(--red); }
[data-color="purple"] { --accent: var(--purple); }
[data-color="teal"]   { --accent: var(--teal); }
[data-color="gray"]   { --accent: var(--gray); }
[data-color="mint"]   { --accent: var(--mint); }