/* ============================================================
Datafluvia — design tokens.
The single source of truth for colour, type, geometry and motion on the
public surface. Values come from `.docs/datafluvia/ui-design-standards.md`
(§2 renk, §3 tipografi, §4 boşluk ve geometri, §9 hareket), which CLAUDE.md
names "the single visual source of truth".
Light is the canonical theme — the brand direction is explicit:
white/light surfaces, dark navy typography, indigo primary action, teal for
verification and data freshness. No purple surfaces. No decorative
gradients. No neon.
The dark theme is an opt-in variant built from the SAME sanctioned navy
ramp (`--df-navy-950/900/800`); it is not a second design language.
Every colour on the public pages must come through one of these tokens.
============================================================ */
:root {
/* ---- Navy (typography + dark-theme surfaces) ---- */
/* Derived rung, BELOW navy-950. It exists for one surface: the landing
page's dark canvas, where the hero's radial lighting has to bloom out of
something darker than the app's darkest, or the glow has nowhere to come
from. Still navy — the hue is intact and it is deliberately not #000000,
which flattens every shadow above it. */
--df-navy-990: #030A1C;
--df-navy-950: #07112B;
/* The light ground, PINNED — the counterpart to navy-990 and it exists for
the same kind of surface. `--df-canvas` and `--df-surface` are semantic
and follow the theme; the auth diptych needs one light half and one dark
half at ALL times, and which side is which is what the theme decides. A
pane that has to stay light in the dark theme cannot ask a token that
flips. Same value as the light theme's --df-canvas, on purpose. */
--df-paper: #F6F8FC;
--df-navy-900: #0B1739;
--df-navy-800: #14264D;
/* Derived rung — the dark theme needs a visible hairline above navy-800. */
--df-navy-700: #1D3462;
--df-navy-300: #7B89AB;
--df-navy-200: #A7B3CE;
--df-navy-050: #EAEEF9;
/* ---- Indigo (primary action) ---- */
/* Derived rung — the FILLED primary sits deeper than the link ink, so the
one control that is entirely colour reads as the heaviest thing on the
page. White on #1E3AAF measures 9.4:1, comfortably past AAA. */
--df-indigo-800: #1E3AAF;
--df-indigo-700: #2747D7;
--df-indigo-600: #365CF5;
--df-indigo-500: #5577FF;
/* Derived rung — link ink on navy needs to clear AA. */
--df-indigo-300: #9AB0FF;
--df-indigo-100: #E4EAFF;
/* ---- Teal (verified · healthy · data freshness · the flow motif) ---- */
/* Derived rung — teal-700 on teal-100 measures 4.37:1, just under AA for the
12px labels it lands on. This rung clears it at 6.2:1. */
--df-teal-800: #05635C;
--df-teal-700: #087E76;
--df-teal-600: #0FA89A;
/* Derived rung — teal-600 is too dark to read on navy. */
--df-teal-400: #3FD0C1;
--df-teal-100: #DDF7F3;
/* ---- Violet (sidebar active indicator — reinstated 2026-09-02) ----
The 2026-08-31 note here said violet was retired and the boards should
not be restored from. Explicit product decision reverses that: the
sidebar active row goes back to the boards' lilac surface + violet ink,
using §2's own sanctioned hex pair directly (`--df-sidebar-active-bg:
#F5F2FF`, `--df-sidebar-active: #5B3FD6`) rather than re-deriving new
values. Violet still does exactly one job — the active row indicator —
never a general surface or a second action colour; indigo remains the
product's action colour and teal its accent. */
--df-violet-700: #4A2FB0;
--df-violet-600: #5B3FD6;
/* Dark-theme ink — light enough to clear contrast on the navy-900 sidebar,
the same move --df-sidebar-active makes elsewhere in dark (a lighter
rung of the same hue rather than the light theme's deep one). */
--df-violet-300: #B9A6FF;
--df-violet-100: #F5F2FF;
/* ---- Slate (neutrals) ---- */
--df-slate-950: #101828;
--df-slate-700: #344054;
--df-slate-600: #475467;
--df-slate-500: #667085;
/* The rung between the muted ink and the strong border. It exists for ONE
job: the hover edge of a control. With controls now resting on the
surface colour rather than on a sunk fill, hover can no longer be a
background change — the edge has to carry it, and slate-300 → slate-500
is too big a jump to read as a hover rather than as a focus. */
--df-slate-400: #98A2B3;
/* The resting edge of a control in light. It is its own rung because
slate-300 is a 1.47:1 line on white — a hairline that meets nothing, and
a control's fill alone is not enough separation from the surface behind
it, so that hairline is most of what draws the box. 3.63:1 on the white
fill and 3.19:1 on --df-canvas behind it: 1.4.11 asks a control boundary
to clear 3:1 against BOTH of its neighbours, and this rung is picked to
be the darkest value that still reads as a hairline rather than a rule. */
--df-slate-450: #7D8798;
--df-slate-300: #D0D5DD;
--df-slate-200: #E4E7EC;
--df-slate-100: #F2F4F7;
/* ---- Status ---- */
--df-success-700: #067647;
--df-success-100: #DCFAE6;
--df-warning-700: #B54708;
--df-warning-100: #FEF0C7;
--df-danger-700: #B42318;
--df-danger-100: #FEE4E2;
--df-info-700: #175CD3;
--df-info-100: #D1E9FF;
/* The info wash one step deeper — a finished job's note, so "ready" reads
louder than the "still working" note it replaces. */
--df-info-200: #B2D6FF;
/* ---- Type ---- */
--df-font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--df-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
/* The landing brief asks for a separate display family, and the token exists
so components can reference a NAME rather than a family — but it resolves
to the same stack. One face, two roles, which is what keeps a heading and
the sentence under it looking like they belong to each other.
`ui-design-standards.md` §3 named Inter. Montserrat replaces it by
explicit product decision (2026-08-31); §3 is the visual source of truth
and should be amended to say so rather than left to disagree with the
running app. Montserrat is geometric and runs ~4% wider than Inter at the
same size, so anything measured in `ch` or pinned with `nowrap` is where
the swap will show first. */
--df-font-display: var(--df-font-sans);
/* The app scale tops out at 32px Display; the marketing page continues the
same ratio and the same 650 weight upward rather than switching face. */
--df-text-hero: clamp(2.125rem, 1.35rem + 3.4vw, 3.5rem); /* 34 → 56 */
--df-text-display: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem); /* 28 → 40 */
--df-text-title: 1.5rem; /* 24/32 */
--df-text-section: 1.125rem; /* 18/26 */
--df-text-card: 0.9375rem; /* 15/22 */
--df-text-body: 0.875rem; /* 14/21 */
--df-text-small: 0.75rem; /* 12/18 */
--df-text-metric: 1.5rem; /* 24/30, tabular */
--df-leading-tight: 1.15;
--df-leading-snug: 1.35;
--df-leading-body: 1.55;
--df-leading-relaxed: 1.7;
--df-weight-regular: 400;
--df-weight-medium: 500;
--df-weight-strong: 600;
--df-weight-display: 650;
/* ---- Space (4px base grid) ---- */
--df-space-1: 0.25rem;
--df-space-2: 0.5rem;
--df-space-3: 0.75rem;
--df-space-4: 1rem;
--df-space-5: 1.25rem;
--df-space-6: 1.5rem;
--df-space-8: 2rem;
--df-space-10: 2.5rem;
--df-space-12: 3rem;
--df-space-16: 4rem;
--df-space-20: 5rem;
--df-space-24: 6rem;
/* ---- Geometry ----
§4 sanctions an 8–20px band. The surface sits in the upper half of it
rather than on the floor: at 10px a 200px-wide card reads as a rectangle
with the corners knocked off, and the panel-heavy screens (the platform
overview above all) turn into a grid of boxes. One step softer everywhere
is a single decision taken here, so the landing page, the auth split, the
tenant dashboard and the platform panel cannot drift apart — which is the
whole reason these are tokens and not literals. */
--df-radius-card: 14px;
/* Product panels sit one step softer again than an in-app card — still
inside the band, still never a pill. */
--df-radius-panel: 18px;
/* Controls only — inputs, buttons, chips, the focus ring. Deliberately a rung
tighter than a card: a control nested inside a card must not out-curve its
container, or the two corners fight. Deliberately *not* applied to panels —
the auth split runs to the viewport edge with no rounded shell (§4). */
--df-radius-control: 12px;
--df-radius-pill: 999px;
--df-rule: 1px;
--df-control-sm: 32px;
--df-control-md: 40px;
--df-control-lg: 48px;
--df-measure: 62ch;
--df-page-max: 1200px;
/* One gutter for every full-bleed section's inner column, so the landing page
and the nav pill stay on the same left edge at every width. */
--df-gutter: clamp(1rem, 4vw, 2rem);
/* App shell (§4): the marketing page is a 1200px column, the app is not —
an overview runs to 1600px and table/builder pages go fluid. */
--df-app-max: 1600px;
/* 248px → 268px → 228px, all on 2026-09-06. The middle number was sized for
50px rows with a 20px icon and a 15px label, which is what the redesign
started with; once the row came down to 38px with a 26px tile and an 11px
label, the same 268px left "Agent Sürümleri" floating a third of the way
across an empty row. 228px still clears the longest label plus its phase
badge — that pair is what sets the floor here, not the shell. */
--df-sidebar-w: 198px;
/* The rail follows the rows down: 76px was two 18px margins around a 44px
icon well, and the well is 40px now. 64px keeps a 12px margin either
side — enough that the well reads as sitting in a rail rather than
filling it, and the active row's edge dot still lands inside. */
--df-sidebar-w-collapsed: 64px;
/* 64px → 44px (2026-09-06, asked for as "at least 20px off"). The bar holds
one 32px field and a row of 32px icon buttons, so 44px leaves 6px above
and below them — the tightest the row can be and still have air. 64px was
14px of empty canvas on a surface whose whole job is a dense operator
table, which is the one place height is worth nothing. */
--df-topbar-h: 44px;
/* ---- Motion (§9: 120–160ms micro, 180–220ms overlay) ---- */
--df-dur-micro: 140ms;
--df-dur-overlay: 200ms;
/* Section reveal — the one long duration on the site, and the only motion
that is allowed to move a block of content. */
--df-dur-reveal: 620ms;
--df-ease: cubic-bezier(.2, .8, .2, 1);
/* ---- Elevation (§4: border + very light shadow, never a heavy drop) ---- */
--df-shadow-card: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px rgba(16, 24, 40, .04);
--df-shadow-raised: 0 2px 4px rgba(16, 24, 40, .06), 0 12px 28px rgba(16, 24, 40, .08);
/* ---- Z scale (named, never an arbitrary 9999) ---- */
--df-z-base: 1;
--df-z-sticky: 200;
--df-z-dropdown: 300;
/* ---- Third-party brand marks ----
The one set of colours in this file that is NOT ours and therefore does
NOT flip with the theme: Microsoft's guidelines fix these four squares,
and a themed Microsoft logo is both wrong and unrecognisable. They live
here anyway rather than inline in a template, because "a raw hex outside
Tokens.css is a bug" is a rule about where colour is *written*, not about
which colours are allowed to be constant. */
--df-brand-ms-red: #F25022;
--df-brand-ms-green: #7FBA00;
--df-brand-ms-blue: #00A4EF;
--df-brand-ms-yellow: #FFB900;
/* Connector marks on the source picker (`Components/Brand/ConnectorMark.html`),
04.10.2026. Same exemption as the Microsoft squares: a vendor's colour is
the vendor's, it does not flip with the theme. The picker tints each
mark's tile from these with `color-mix`, so no tint is written twice. */
--df-brand-mysql: #00618A;
--df-brand-postgres: #336791;
--df-brand-mssql: #CC2927;
--df-brand-fabric-start: #0B6A53;
--df-brand-fabric-mid: #1DB37E;
--df-brand-fabric-end: #7EE3C1;
--df-brand-synapse: #0A6CC2;
--df-brand-synapse-light: #36B8F0;
--df-brand-sqlite: #0F80CC;
/* ---- National flags (language switcher) ----
Same exemption, same reason as the Microsoft squares above: a nation's
colours are fixed constants, so these do not flip with the theme either.
Written here rather than inline in `Components/Brand/LanguageFlag.html`
because the rule is about WHERE colour is written, not about which
colours may be constant. Official values: TR #E30A17, Union Flag
Pantone 280C/186C as #012169 / #C8102A. */
--df-flag-tr-red: #E30A17;
--df-flag-tr-white: #FFFFFF;
--df-flag-gb-blue: #012169;
--df-flag-gb-red: #C8102A;
--df-flag-gb-white: #FFFFFF;
}
/* ============================================================
Semantic layer — LIGHT (canonical)
============================================================ */
:root,
[data-theme="light"] {
--df-canvas: #F6F8FC;
/* The panel's ground, over the flat canvas: two very pale icy washes pinned
to the top corners and one at the bottom-left. The brief's "extremely
faint translucent geometric shapes near the edges, centre visually quiet".
Radial rather than linear so nothing has an edge to notice; at these
alphas over #F6F8FC the shapes are felt rather than seen. Here and not in
a layout sheet because a page background is colour. */
/* PANELS (2026-09-06). The washes above are weather; this layer is the
thing you actually see: five oversized rounded rectangles, rotated about
20deg, drifting off three edges of the frame. It is the product's own
card — `--df-radius-card` at ten times the size — used as scenery, so the
ground and the content are made of the same shape.
Drawn, not photographed: an inline SVG rather than a raster, so it is one
token instead of two exported files, resolves per theme like every other
colour here, and stays sharp on any display. Corners live off-canvas on
purpose — a shape whose four corners are all visible reads as an object
placed on the page, and this must read as the page continuing past it.
Reading the data URI: `url(%23pgA)` is `url(#pgA)`; a raw `#` would start
the URL's fragment, so the gradient references are the one thing escaped.
Colours are `rgb()` + `stop-opacity` for the same reason — no hex, no
escaping. `slice` + `background-size: cover` crops rather than tiles. */
--df-canvas-veil:
url("data:image/svg+xml,"),
radial-gradient(58rem 26rem at 3% -10%, rgba(211, 228, 250, .60), transparent 62%),
radial-gradient(46rem 22rem at 99% -14%, rgba(221, 230, 252, .55), transparent 64%),
radial-gradient(42rem 24rem at 1% 110%, rgba(216, 231, 249, .45), transparent 62%);
/* The sheet a form column is printed on. It exists because the controls on
it are borderless: with no edge, the ONLY thing separating a field from
its background is that the field is lighter, so the background cannot
also be white. --df-canvas is 1.06:1 off white and would not do it. */
--df-form-pane: #E9EDF5;
/* The atmosphere under the whole app shell. None in light — the light
shell is flat canvas with the veil on the platform side; the dark theme
declares the auth door's own wash here so the inside of the product and
the door into it are one ground (2026-09-13). */
--df-canvas-wash: none;
/* The topbar's own fill, so the dark theme can drop it to the canvas
without touching --df-surface, which every card reads. */
--df-topbar-bg: var(--df-surface);
--df-surface: #FFFFFF;
--df-surface-sunk: var(--df-slate-100);
/* THE ICE RUNG. A sunk well that is cool rather than grey, for the one or
two places where the well holds a RESULT the reader is being asked to
accept — the purchase screen's running total. `--df-surface-sunk` is the
neutral floor and stays the default; this is the same depth with the
accent's hue mixed into it, so the well reads as part of the decision
instead of as another grey box. Derived from the indigo scale rather
than picked, because indigo is the app's only accent and a hand-chosen
ice blue would be a second one. */
--df-surface-ice: color-mix(in srgb, var(--df-indigo-100) 72%, #FFFFFF);
/* A TABLE'S OWN BANDS — the column-header strip and the row under the
pointer. On white they are the sunk rung, which is what they have always
been; the tokens exist so the dark theme can move them the other way
without every well and tab track on the page following. See the dark
branch for the argument. */
--df-table-head: var(--df-surface-sunk);
--df-table-row-hover: var(--df-surface-sunk);
/* A PANEL's floor, as opposed to a card's. Same white here — on the light
theme a panel and a card are both the surface rung, and the difference
the dark branch draws does not exist. */
/* The lit top edge of the KPI card, borrowed for the header strip. On
white it lands on white and does nothing, which is correct: the light
theme's header already reads as a band because it is grey on white. */
--df-table-head-rim: rgba(255, 255, 255, .95);
/* The body of a sheet (`dpModal`): ice blue, a breath cooler than the
white fields printed on it, so the form reads as a card ON the sheet
rather than the sheet itself (product decision, 2026-09-13). */
--df-sheet-body: #F3F8FE;
/* The sheet itself — an OUTSET object over the scrim, not a flat panel
(2026-09-13). Fill, head band, edge and lift are named apart from the
card tokens so the sheet can stand up without every card following. The
lift is the dome recipe (--df-dome-shadow) at sheet scale: a lit top rim,
a contact line under the bottom edge, and a wide, low drop. */
--df-sheet-bg: var(--df-surface);
--df-sheet-head: var(--df-surface-sunk);
--df-sheet-edge: var(--df-border);
--df-sheet-lift:
inset 0 1px 0 rgba(255, 255, 255, .95),
inset 0 -1px 0 rgba(206, 219, 238, .60),
0 1px 2px rgba(16, 24, 40, .08),
0 24px 56px -12px rgba(30, 50, 90, .30);
/* A row's action tile (`.pl-actions .dp-btn--icon`). Real ice, not the
sheet body's breath of it: `--df-sheet-body` (#F3F8FE) on a white row
was one step off the paper, and one step is what the eye skips (product
report, 2026-09-13: "butonlar belli olmuyor" / "iç rengi alt tarafla eş
oluyor"). This is a visible cool blue — still ice, still no chroma to
speak of — and it carries the tile alone: no edge. Its own token rather
than a shared one, because the dark side needs a different answer. */
--df-row-action-bg: #E3EEFB;
/* The row action BUTTON (2026-09-26) — no longer the ice tile above, which
stays for the `⋮` toggle and the sidebar glyph. Paper on paper, lifted by
the shadow alone: the tint was disliked and in dark it sank into the row.
The glyph carries the colour (neutral / success / danger), the tile none. */
--df-row-action-surface: #FFFFFF;
--df-row-action-shadow: 0 1px 2px rgba(16, 24, 40, .14), 0 3px 8px rgba(16, 24, 40, .10);
/* Hover fills — the variant's own tint the button sinks into. */
--df-row-action-hover: var(--df-action-soft);
--df-row-action-hover-danger: var(--df-danger-100);
--df-row-action-hover-success: var(--df-success-100);
--df-border: var(--df-slate-200);
--df-border-strong: var(--df-slate-300);
/* The hover edge of a control (see --df-slate-400). One rung darker than
--df-border-strong, never as dark as the focus ring: hover says "this is
interactive", focus says "the keyboard is here", and the two must not
look like the same event. */
--df-border-hover: var(--df-slate-400);
/* A CONTROL's edge, kept apart from --df-border-strong on purpose: the
decorative hairline has no contrast duty, the edge of an input does
(§ F02, 3:1). In light the two diverge — a card can be outlined at
slate-300 and still read, an empty 40px field cannot. The hover rung
moves with it: --df-border-hover is LIGHTER than the resting control
line here, so a control that borrowed it would go pale on hover. */
--df-control-line: var(--df-slate-450);
--df-control-line-hover: var(--df-slate-500);
/* ---- The writable-field well ----
Ported from Provia's `--field-well-*` (src/styles/theme.css), which is the
house recipe this product is meant to match. The rule it encodes: a field
you can TYPE in rests SUNK. Raised (outset) belongs to things you click —
buttons, dropdown triggers, pickers.
Three parts, and the second is the one people drop:
inset 2px 2px — the shade the top-left rim casts into the box.
inset -2px -2px — white counter-light on the bottom-right rim. This is
what makes it a well rather than a smudge: light entering from the
top-left has to land somewhere, and a recess catches it on the far
inner wall.
a WHITE 1px edge (--df-control-edge), not a grey line. The old grey
hairline was the thing that read as thin; here the edge is the lit lip
of the recess, so it belongs to the same light as the shadows.
The fill is translucent white over --df-form-pane rather than flat
#FFFFFF, so the pane's tint shows through the well the way it would in a
real one. Focus is a FILL change only — no ring, no border: the well
lightens toward opaque white and deepens a touch. */
--df-control-well: rgba(255, 255, 255, .55);
--df-control-well-focus: rgba(255, 255, 255, .88);
/* The same two fills, flattened against --df-form-pane. Chrome's autofill
can only be repainted with a 100px inset shadow, and a shadow in a
translucent colour leaves the canary yellow showing through it — so the
autofill rule needs the composited result as a solid. If the pane tone
ever moves, these move with it. */
--df-control-well-solid: #F5F7FA;
--df-control-well-solid-focus: #FCFDFE;
--df-control-edge: rgba(255, 255, 255, .5);
/* A drop zone's dashed edge (04.10.2026). Not --df-control-edge: that is a
white/transparent bevel and left the dashes invisible until hover. The
dashes must read at rest — they ARE the "drop here" — and go solid on
hover, so this is an indigo the reader sees without looking for it. */
--df-drop-line: var(--df-indigo-500);
--df-control-inset:
inset 2px 2px 5px rgba(35, 52, 90, .11),
inset -2px -2px 5px rgba(255, 255, 255, .55);
/* ---- DOMED: a surface that reads as convex and resting on the ground ----
Four layers, and each one is doing a different job. Take any of them away
and the chip goes flat again:
inset 0 1px 0 white the lit crown. The light is above, so the
top edge catches it and the eye reads the
middle as nearer than the edges.
inset 0 -1px 0 blue-grey the underside in its own shade — the far
side of the dome curving away.
0 1px 1px near-black .05 CONTACT. Tight, unblurred, directly under
the bottom edge: this is the line where the
object meets the surface, and it is what
"the edges are touching the ground" means.
0 8px 16px -8px blue .18 the ambient pool the contact shadow sits in,
pulled in with a negative spread so it stays
under the object instead of haloing it.
Paired with --df-dome-fill, a barely-there vertical gradient. Flat white
with these shadows still reads as a card; the gradient is what makes the
middle of the surface brighter than its bottom edge. */
--df-dome-fill: linear-gradient(180deg, #FFFFFF 0%, #FDFDFF 46%, #F4F7FC 100%);
--df-dome-shadow:
inset 0 1px 0 rgba(255, 255, 255, .95),
inset 0 -1px 0 rgba(206, 219, 238, .60),
0 1px 1px rgba(16, 24, 40, .05),
0 8px 16px -8px rgba(30, 50, 90, .18);
--df-dome-shadow-hover:
inset 0 1px 0 rgba(255, 255, 255, .95),
inset 0 -1px 0 rgba(206, 219, 238, .60),
0 1px 1px rgba(16, 24, 40, .06),
0 10px 20px -8px rgba(30, 50, 90, .22);
/* The data-asset card (file card on a source, 04.10.2026 brief): a white
surface with the faintest cool tint, metric panels on a 135° blue→indigo
wash, and an edge that turns indigo-tinted on hover. */
--df-asset-fill: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%);
--df-asset-edge: #E5EAF2;
--df-asset-edge-hover: color-mix(in srgb, var(--df-indigo-600) 28%, #E5EAF2);
--df-asset-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px -6px rgba(30, 50, 90, .10);
--df-asset-shadow-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 28px -12px rgba(30, 50, 90, .22);
--df-asset-metric-fill: linear-gradient(135deg, rgba(59, 130, 246, .06), rgba(99, 102, 241, .08));
--df-asset-metric-hover: linear-gradient(135deg, rgba(59, 130, 246, .10), rgba(99, 102, 241, .13));
--df-asset-metric-edge: rgba(99, 102, 241, .10);
--df-asset-panel: #FAFBFE;
--df-asset-remove-bg: #FFF8F7;
--df-asset-remove-edge: rgba(180, 35, 24, .18);
/* A focus halo for a control whose EDGE must not move. Three pixels of
indigo at a tenth opacity, outside the border: on the topbar search a
border that changed colour on focus read as a validation error, and this
says the same thing without touching the line. Composed after an inset
shadow, never instead of one. */
--df-focus-halo: 0 0 0 3px rgba(54, 92, 245, .10);
--df-control-inset-focus:
inset 2px 2px 6px rgba(35, 52, 90, .15),
inset -2px -2px 5px rgba(255, 255, 255, .55);
/* ---- Segmented control (the auth tab strip) ----
Same house rule as the well, one level up: the SELECTED segment does not
rise out of the track, it sinks INTO it. Raised belongs to things you
click once — buttons, triggers; a segment is a position, and a position
reads as a slot.
The ring is the field recipe re-toned for a tinted fill: the shade goes
indigo rather than slate, because a neutral grey shadow over the ice-blue
fill drags it toward dirty grey. Do not raise its opacity, and do not add
the sharp one-directional top highlight — on a light fill that hairline
reads as a border drawn over the tab. */
/* ---- The other half of the well: RAISED ----
Same house rule, stated from the other side. A well says "put something
in"; a raised surface says "this is an object, and objects you click sit
on top". Two rungs only, and mixing them up is the whole failure mode:
--df-panel-shadow a container that holds other things (the platform
door's console). Wide, soft, low opacity.
--df-control-raised a thing you press. Tighter and shorter, with a lit
top edge, so it reads as a key rather than a card.
Both carry a counter-light on the top-left — the same lamp the wells are
lit by. If a shadow here ever stops agreeing with --df-control-inset about
where the light comes from, the surface stops reading as one material. */
--df-panel-shadow:
6px 8px 18px rgba(30, 50, 90, .13),
-3px -3px 8px rgba(255, 255, 255, .45),
inset 0 1px 0 rgba(255, 255, 255, .45);
--df-control-raised:
3px 4px 10px rgba(35, 52, 90, .12),
-2px -2px 5px rgba(255, 255, 255, .40),
inset 0 1px 0 rgba(255, 255, 255, .5);
--df-control-raised-hover:
4px 6px 14px rgba(35, 52, 90, .16),
-2px -2px 5px rgba(255, 255, 255, .45),
inset 0 1px 0 rgba(255, 255, 255, .5);
--df-tab-track: var(--df-surface);
--df-tab-active-bg: var(--df-indigo-100);
--df-tab-active-fg: var(--df-indigo-800);
--df-tab-active-ring:
inset 0 3px 6px -2px rgba(30, 58, 175, .16),
inset 2px 3px 8px -3px rgba(30, 58, 175, .12),
inset -1px -2px 6px -2px rgba(255, 255, 255, .55),
inset 0 0 0 1px rgba(30, 58, 175, .06);
/* The hairline around a flag icon. The only themed part of a flag: on the
white pill the white in either flag would otherwise have no edge. */
--df-flag-edge: var(--df-border-strong);
--df-ink: var(--df-slate-950);
--df-ink-strong: var(--df-navy-950);
--df-ink-body: var(--df-slate-600);
--df-ink-muted: var(--df-slate-500);
/* The dark half of a split badge — a page title written as one object,
glyph on ink, name on paper. Not `--df-ink-strong`: that is a TEXT
colour, and the day somebody warms the body ink this wedge would follow
it for no reason. Its own name, because it is its own decision. */
--df-mark-wedge: var(--df-navy-950);
--df-mark-wedge-ink: #FFFFFF;
--df-action: var(--df-indigo-600);
--df-action-hover: var(--df-indigo-700);
--df-action-ink: #FFFFFF;
--df-action-link: var(--df-indigo-700);
--df-action-soft: var(--df-indigo-100);
/* THE FILLED PRIMARY, split from --df-action on purpose.
--df-action also draws the focus ring and the link ink, and both of those
have to stay bright enough to be seen as a 2px outline on white. The
filled button has the opposite requirement: it is a solid block of colour
the size of a thumb, and at indigo-600 it read as a light, almost pastel
blue next to the navy typography around it. Deepening --df-action to fix
the button would have dimmed every focus ring in the app.
Two tokens, one decision each. */
--df-action-fill: var(--df-indigo-700);
--df-action-fill-hover: var(--df-indigo-800);
/* Public CTA ("Başvuru oluştur") — the same filled indigo primary the app
uses (§2: "Primary button/link: indigo-600; hover indigo-700"). The fill
*is* the control, so it carries no border: an outline around a filled
block is a second edge doing the first one's job.
Aliased to --df-action-fill rather than to the ramp, so the public shell
and the in-app primary can never drift apart — they are the same filled
control on two surfaces and there is no reading in which they should be
two different blues. */
--df-cta-bg: var(--df-action-fill);
--df-cta-ink: var(--df-action-ink);
--df-cta-hover-bg: var(--df-action-fill-hover);
/* Ghost / tertiary tier (§4) — no border, no resting fill; the state is
carried entirely by a recessed tint on hover and press. */
--df-ghost-hover-bg: var(--df-slate-100);
--df-ghost-active-bg: var(--df-slate-200);
--df-accent: var(--df-teal-800);
--df-accent-soft: var(--df-teal-100);
/* The thin-line data-flow motif (§11) — decorative, low contrast. */
--df-flow-line: rgba(15, 168, 154, .28);
/* The motif's dots carry a rung more alpha than its lines — the same
relationship the band already carries (--df-band-flow → --df-band-flow-dot).
A 1px stroke and a 3px disc at one alpha do not weigh the same on screen. */
--df-flow-dot: rgba(15, 168, 154, .44);
--df-grid-line: rgba(16, 24, 40, .05);
/* An EMPTY STAGE's scenery — the dashed thread, its joints, and the tiles
the thread runs between (`Components/Dashboard/LicenseStage.html`).
Its own three tokens rather than --df-flow-line, although the two motifs
look alike. The flow line is teal because it draws DATA moving; this one
runs between a team and an invoice and belongs to the app's single accent.
One token borrowed for both would mean the day the flow motif is retuned
for the landing page, an empty screen inside the product changes colour.
Low contrast on purpose: it is decoration behind a heading that carries a
4.5:1 duty, and it must never compete with the button it surrounds. */
--df-stage-thread: rgba(85, 119, 255, .30);
--df-stage-node: rgba(85, 119, 255, .55);
--df-stage-tile: var(--df-indigo-300);
--df-focus: var(--df-indigo-600);
/* App sidebar (§3) — a light, cool surface separated from the canvas by a
hairline, never a filled dark panel.
THE ROW STATES ARE AN INSET/OUTSET LANGUAGE (product decision,
2026-09-06), not three flat fills:
default → flat. The sidebar's own surface, no border, no shadow.
hover → OUTSET. The row lifts onto --df-sidebar-raised with a
shadow small enough to read as a millimetre, not a card.
active → INSET. A pale blue well pressed into the surface, with a
lit top edge so the press has a light source.
Restraint is the whole point: depth is interaction feedback, so a row
that is neither hovered nor current carries none of it. §12 still holds —
the active row is told four ways (well, blue ink, heavier weight, and a
dot on the trailing edge), never by colour alone.
The active accent moved from violet to indigo on the same decision. The
shell now speaks the product's own action colour; violet keeps only the
landing-page work it already had, and no longer appears in the app. */
--df-sidebar-bg: #F8FAFD;
/* A blue-grey hairline rather than the neutral --df-slate-200: on a cool
surface the neutral rung reads faintly warm next to it. */
--df-sidebar-border: #E2E8F4;
--df-sidebar-ink: var(--df-navy-800);
--df-sidebar-ink-muted: var(--df-slate-500);
/* Hover is a LIGHTER surface than the sidebar, not a darker one — that is
what makes the row read as lifted off it rather than pressed into it. */
--df-sidebar-hover: #FFFFFF;
/* The icon tile's own surface (product decision, 2026-09-06): ice blue, not
the white of hover. White tiles on a #F8FAFD sidebar read as holes punched
in the surface, and they collided with the hover state — the row lifting
to white made its tile disappear into it. Ice sits one step cool of the
sidebar and stays distinguishable from --df-sidebar-active-bg, which is
tinted indigo rather than cyan. */
--df-sidebar-tile: #E7F0F9;
/* The glyph tile's own pair — fill and ink — kept apart from
--df-sidebar-tile because that wash is ALSO what a hovered row lifts
onto, and the two must be free to differ (they do on dark). Light keeps
ice + indigo; dark borrows the table's row-action button, so the rail
and the list wear one tile (2026-09-13). */
--df-sidebar-glyph-bg: var(--df-sidebar-tile);
--df-sidebar-glyph-ink: var(--df-indigo-700);
--df-sidebar-active-bg: #E9F0FF;
--df-sidebar-active: var(--df-indigo-700);
/* The three depths. Kept here rather than in Dashboard.css because they are
colour (shadow is colour with a blur), and colour lives in this file.
--df-sidebar-raised hover, outward: one hairline of ambient contact
shadow and one soft pool under it.
--df-sidebar-pressed :active, inward: the same idea inverted, weaker,
because a press lasts 100ms and does not need to
be legible from across the room.
--df-sidebar-well the current row: an inset well plus a 1px lit top
edge (the white inset at the end), which is what
stops a pale blue rectangle from looking flat. */
--df-sidebar-raised:
0 1px 1px rgba(16, 24, 40, .04),
0 4px 10px rgba(16, 24, 40, .06);
/* The rail's hover. The tile already sits on --df-sidebar-raised at rest,
so hovering it has to go further than a flat row's hover does — same two
layers, one rung deeper. */
--df-sidebar-raised-strong:
0 1px 2px rgba(16, 24, 40, .06),
0 6px 14px rgba(16, 24, 40, .10);
--df-sidebar-pressed:
inset 0 1px 2px rgba(16, 24, 40, .07);
--df-sidebar-well:
inset 0 2px 4px rgba(30, 58, 175, .10),
inset 0 0 0 1px rgba(54, 92, 245, .10),
inset 0 1px 0 rgba(255, 255, 255, .70);
/* The build chip in the sidebar's foot. The one lit thing down there: the
sidebar's indigo, on its soft wash, with a glow instead of the chip
well's inset — a version is a fact you go looking for, and a glow lets it
be findable at 10px without shouting. */
--df-sidebar-stamp-bg: var(--df-action-soft);
--df-sidebar-stamp-ink: var(--df-indigo-700);
--df-sidebar-stamp-glow:
0 0 0 1px rgba(54, 92, 245, .16),
0 2px 10px rgba(54, 92, 245, .22);
/* The sidebar's own edge onto the content: a hairline does the separating,
this only gives the surface somewhere to sit. */
--df-sidebar-elev: 2px 0 16px rgba(16, 24, 40, .035);
/* Trailing markers — counts and phase codes. Quiet by construction: a
blue-grey well with navy ink, secondary to the row's own label. */
--df-sidebar-chip-bg: #EDF1F9;
--df-sidebar-chip-ink: var(--df-slate-600);
/* The collapsed rail's tooltip. Inverted on purpose: it is a transient
overlay on top of the app, not another surface belonging to it. */
--df-sidebar-tip-bg: var(--df-navy-900);
--df-sidebar-tip-ink: #FFFFFF;
/* ---- Ink band ----
Two landing sections (agent platform, reports) are set on a dark ink
surface so the page has a spine instead of an unbroken sheet of white.
In light this is the navy ramp at its deepest; in dark it is the same ramp
one rung *above* the canvas, so the band still separates itself. */
--df-band-bg: var(--df-navy-950);
--df-band-elev: var(--df-navy-900);
--df-band-border: var(--df-navy-700);
--df-band-ink: #FFFFFF;
--df-band-ink-body: var(--df-navy-200);
--df-band-ink-muted: var(--df-navy-300);
--df-band-accent: var(--df-teal-400);
--df-band-link: var(--df-indigo-300);
/* The §11 flow motif *on* the band. --df-flow-line is tuned for a light
surface and disappears against navy, so the band carries its own rung.
Decorative and low contrast — it never encodes meaning. */
--df-band-flow: rgba(63, 208, 193, .34);
--df-band-flow-dot: rgba(63, 208, 193, .55);
/* The product panel that sits *on* the band — light in the light theme, so
the catalogue reads as the app rather than as more band. */
--df-panel-bg: #FFFFFF;
--df-panel-sunk: var(--df-slate-100);
--df-panel-border: var(--df-slate-200);
--df-panel-ink: var(--df-navy-950);
--df-panel-ink-body: var(--df-slate-600);
--df-panel-ink-muted: var(--df-slate-500);
--df-shadow: var(--df-shadow-card);
--df-shadow-lift: var(--df-shadow-raised);
/* ---- Page header (`Components/PlatformPanel/PageHead.html`, 2026-09-13
redesign) ----
One rounded container at the top of every page: a white surface with the
faintest cool tint pulled across it, a border one step lighter than
--df-border so the card reads as lifted rather than outlined, and a
diffused shadow with almost no offset. The two waves are the brand's
"data flow" at a few percent — pale enough to be found, never seen
first. The tile is the page's glyph on a pale indigo gradient, and the
one strong colour in the header is the primary action's fill, which
carries a blue-tinted shadow so it sits above the card. */
--df-pagehead-bg: #FFFFFF;
--df-pagehead-tint: #F6F9FE;
--df-pagehead-border: #E3E9F2;
--df-pagehead-shadow: 0 1px 2px rgba(11, 23, 57, .04), 0 10px 28px rgba(11, 23, 57, .05);
--df-pagehead-wave-1: #DCE8FF;
--df-pagehead-wave-2: #EDF3FF;
--df-pagehead-tile-top: #F2F6FF;
--df-pagehead-tile-bottom: var(--df-indigo-100);
--df-pagehead-tile-ring: rgba(54, 92, 245, .10);
--df-pagehead-tile-ink: var(--df-indigo-600);
--df-pagehead-cta-shadow: 0 6px 16px rgba(54, 92, 245, .28);
/* ---- "Veriye sor" workspace (25.09.2026) — the Provia chat look, carried
over: a tab strip, a diagonal-split usage bar, a navy user bubble, a
raised answer card, a well-shaped composer. Neumorphic by rule: what you
press is raised, what you type into is a well, hover presses IN. The
accent stays indigo — Provia's lime/amber chips are not carried, the
app shell has one accent. Page: `Css/Pages/Fluvai.css`. */
--df-dq-shell-bg: #F9FAFD;
--df-dq-bar-bg: #FFFFFF;
--df-dq-bar-shadow: 0 3px 7px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
--df-dq-thread-bg: #F6F8FC;
--df-dq-dots: rgba(0, 0, 0, .035);
--df-dq-edge: rgba(30, 50, 90, .14);
--df-dq-ink: #1A2138;
--df-dq-ink-2: #4A5670;
--df-dq-ink-3: #59657C;
--df-dq-hover-bg: rgba(30, 50, 90, .06);
--df-dq-tab-bg: #DCE8FB;
--df-dq-tab-hover-bg: #CCDAF3;
--df-dq-navy: #14275C;
--df-dq-navy-hover: #0F1D47;
--df-dq-navy-ink: #E9F0FF;
--df-dq-raise-xs: 3px 3px 6px rgba(0, 0, 0, .104), -2px -2px 5px rgba(255, 255, 255, .5);
--df-dq-raise-md: 3px 3px 8px rgba(35, 52, 90, .13), -2px -2px 5px rgba(255, 255, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
--df-dq-well: inset 2px 2px 5px rgba(0, 0, 0, .13), inset -2px -2px 5px rgba(255, 255, 255, .5);
--df-dq-tool-bg: #FFFFFF;
--df-dq-tool-hover-bg: #F4F7FD;
--df-dq-control-bg: linear-gradient(145deg, #FFFFFF 0%, #F4F7FD 100%);
--df-dq-control-shadow: 3px 4px 10px rgba(35, 52, 90, .12), -2px -2px 5px rgba(255, 255, 255, .40), inset 0 1px 0 rgba(255, 255, 255, .5);
--df-dq-control-active: inset 2px 2px 5px rgba(0, 0, 0, .12), inset -2px -2px 5px rgba(255, 255, 255, .55);
--df-dq-card-bg: #FAFCFF;
--df-dq-card-ink: #1A2138;
--df-dq-card-shadow: 5px 6px 14px rgba(0, 0, 0, .10), -2px -2px 5px rgba(255, 255, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(60, 110, 230, .13), 0 0 12px rgba(60, 110, 230, .07);
--df-dq-user-bg: #163472;
--df-dq-user-ink: #FFFFFF;
--df-dq-user-shadow: var(--df-dq-card-shadow);
--df-dq-chip-ink: var(--df-indigo-600);
--df-dq-badge-l-bg: #EEF2FA;
--df-dq-badge-l-ink: #44557A;
--df-dq-badge-m-bg: #163472;
--df-dq-badge-m-ink: #FFFFFF;
--df-dq-badge-r-bg: #E6ECF7;
--df-dq-badge-r-ink: #44557A;
--df-dq-composer-bg: #FFFFFF;
--df-dq-composer-well: inset 0 2px 5px rgba(35, 52, 90, .10);
--df-dq-composer-focus: inset 0 3px 7px rgba(35, 52, 90, .14);
--df-dq-composer-ring: rgba(54, 92, 245, .22);
--df-dq-composer-ring-on: rgba(54, 92, 245, .45);
--df-dq-send-bg: #163472;
--df-dq-send-hover: #11295C;
--df-dq-send-ink: #FFFFFF;
--df-dq-placeholder: #8A94A8;
--df-dq-popover-bg: #FFFFFF;
--df-dq-popover-edge: rgba(30, 50, 90, .10);
--df-dq-popover-shadow: 0 18px 44px rgba(35, 52, 90, .16);
--df-dq-ctx-bg: #E4EEFF;
--df-dq-ctx-ink: #16357F;
--df-dq-ctx-ring: rgba(22, 53, 127, .14);
--df-dq-warn-bg: rgba(230, 138, 0, .14);
--df-dq-warn-ink: #9A5B00;
--df-dq-danger-ink: #C03A35;
/* ---- Market card palette (04.10.2026, Murat — the store cards) ----
A card on the market shelf takes one of three tones in turn, so a row
of packages reads as three objects and not one card printed three
times. Each tone is a wash (the picture's backdrop and the tile), a
soft and a mid step for the picture's quiet shapes, a strong step for
its one loud shape and an ink for the tile's glyph. Decoration only:
no tone means anything, and the words on the card never take it. */
--df-mkt-violet-wash: #FBF5FF;
--df-mkt-violet-soft: #F1E4FD;
--df-mkt-violet-mid: #DDBDF8;
--df-mkt-violet-strong: #C47BEE;
--df-mkt-violet-ink: #A443DB;
--df-mkt-blue-wash: #F4F7FF;
--df-mkt-blue-soft: #E4EAFF;
--df-mkt-blue-mid: #A9BCFF;
--df-mkt-blue-strong: #5C7DFF;
--df-mkt-blue-ink: #365CF5;
--df-mkt-orange-wash: #FFF7F0;
--df-mkt-orange-soft: #FFE9D6;
--df-mkt-orange-mid: #FFC596;
--df-mkt-orange-strong: #FF9A4A;
--df-mkt-orange-ink: #E8711C;
--df-mkt-chip-bg: #F1F4FA;
/* ---- Overview accent palette (05.10.2026, Murat — the tenant overview
redesign). Four subjects, four tones: agents green, sources blue,
boards violet, questions orange. Blue/violet/orange are the market's
steps reused; green is new. Same shape as the market palette — wash
for the card ground, soft for the tile, mid for the scenery, strong
for the scenery's loud line, ink for the glyph. Decoration only: the
words beside it carry the meaning (§12). */
--df-ov-green-wash: #F2FBF6;
--df-ov-green-soft: #DDF5E7;
--df-ov-green-mid: #A9E5C2;
--df-ov-green-strong: #3CC27F;
--df-ov-green-ink: #12A15B;
--df-ov-blue-wash: var(--df-mkt-blue-wash);
--df-ov-blue-soft: var(--df-mkt-blue-soft);
--df-ov-blue-mid: var(--df-mkt-blue-mid);
--df-ov-blue-strong: var(--df-mkt-blue-strong);
--df-ov-blue-ink: var(--df-mkt-blue-ink);
--df-ov-violet-wash: var(--df-mkt-violet-wash);
--df-ov-violet-soft: var(--df-mkt-violet-soft);
--df-ov-violet-mid: var(--df-mkt-violet-mid);
--df-ov-violet-strong: var(--df-mkt-violet-strong);
--df-ov-violet-ink: var(--df-mkt-violet-ink);
--df-ov-orange-wash: var(--df-mkt-orange-wash);
--df-ov-orange-soft: var(--df-mkt-orange-soft);
--df-ov-orange-mid: var(--df-mkt-orange-mid);
--df-ov-orange-strong: var(--df-mkt-orange-strong);
--df-ov-orange-ink: var(--df-mkt-orange-ink);
--df-ov-rose-soft: #FFE4EA;
--df-ov-rose-ink: #E5426B;
/* The attention list's "all clear" row and its count chip. */
--df-ov-clear-bg: #ECFBF2;
--df-ov-clear-edge: #CDEFDB;
--df-ov-clear-mark: var(--df-success-700);
--df-ov-count-bg: #F0445E;
--df-ov-count-ink: #FFFFFF;
/* A row inside a panel: a hairline card that lifts on hover. */
--df-ov-item-bg: var(--df-surface);
--df-ov-item-edge: #E8EDF5;
--df-ov-item-hover: #F7F9FD;
color-scheme: light;
}
/* ============================================================
Semantic layer — DARK (opt-in variant, same navy ramp)
============================================================ */
[data-theme="dark"] {
/* ---- THE DARK RAMP (2026-09-13, product decision: "çok puslu — koyu
navy dark yapalım"). Six rungs, and every dark surface in the product
resolves through one of them. They are NOT the shared navy ramp above:
that ramp is the light theme's typography and the landing hero's
material, and it is a saturated navy (#0B1739 has more blue in it than
red and green together). Laid over a whole screen, with indigo washes
and lit edges on top, that saturation is what read as fog.
These sit a step deeper and a step greyer at every rung — still navy,
unmistakably, but the blue is in the hue and not in the brightness. The
hairlines are the biggest single change: navy-700 (#1D3462) was a bright
blue rule around every card and every row; `--df-dark-line` is a third
as bright, so the edge is a crease and not a wire.
Semantic tokens only from here down; a page never reads a rung. */
--df-dark-0: #04091A; /* canvas — the ground under everything */
--df-dark-1: #070D22; /* sunk — wells, the sheet's own floor */
--df-dark-2: #0B1329; /* surface — cards, rail, topbar, band */
--df-dark-3: #111B38; /* raised — panels, tips, the band's lift */
--df-dark-line: #1B2648; /* hairline */
--df-dark-line-strong: #263460; /* control edge, hover edge */
/* THE dark ground, product-wide. It was navy-950 with navy-990 reserved for
the landing hero; the deeper rung is now the canvas everywhere, by
explicit product decision — the hero and the auth door were the two
surfaces anyone had actually looked at side by side, and the deeper one is
the one the product is keeping. The old rung is not lost: it is still what
`--df-surface-sunk` and the band sit on, one and two steps up from here.
Every page follows automatically, because every dark surface in the
product resolves through this token. The pages that used to override it
(the landing shell, the auth form column) had their overrides deleted
rather than left pointing at the same value — a redundant override is the
thing that silently stops matching later. Still navy, and deliberately
not #000000, which flattens every shadow above it. */
--df-canvas: var(--df-dark-0);
/* On navy the same idea needs a tenth of the strength: a pale wash would be
three light patches, so these are indigo at 6–8% — a hint of depth in the
corners, invisible the moment you look straight at it. */
/* Same five panels, same geometry, inverted material. On navy the fills go
indigo at 7-10% and the hairline stops being white: a white edge on this
ground is a scratch on the glass, visible from across the room, because
the contrast between #FFF and #030A1C is the largest in the product. The
edge is periwinkle at 6-12% instead — light enough to draw the corner,
dark enough that the eye reads it as a reflection rather than a rule.
Deliberately NOT the light values at lower alpha: alpha alone would keep
the pale-blue hue and turn every panel into fog. */
--df-canvas-veil:
url("data:image/svg+xml,"),
radial-gradient(58rem 26rem at 3% -10%, rgba(54, 92, 245, .08), transparent 62%),
radial-gradient(46rem 22rem at 99% -14%, rgba(85, 119, 255, .07), transparent 64%),
radial-gradient(42rem 24rem at 1% 110%, rgba(54, 92, 245, .06), transparent 62%);
/* On navy the pane is already the darker of the two; the form column keeps
the canvas it has always had. */
--df-form-pane: var(--df-canvas);
/* The auth form column's atmosphere (`.auth-pane::before` in dark), moved
under the app shell so the inside matches the door: the product decision
of 2026-09-13 is that the register page's dark ground IS the dark ground.
Painted on `.df-app`, with the rail and the topbar going transparent
below, so the wash runs edge to edge as one piece. The glass panels
(--df-canvas-veil on the platform main region) stay on top of it. */
--df-canvas-wash:
radial-gradient(62% 50% at 76% 38%,
color-mix(in srgb, var(--df-indigo-500) 22%, transparent), transparent 72%),
radial-gradient(48% 42% at 96% 4%,
color-mix(in srgb, var(--df-violet-600) 16%, transparent), transparent 70%),
radial-gradient(80% 46% at 56% 106%,
color-mix(in srgb, var(--df-navy-800) 70%, transparent), transparent 72%);
--df-topbar-bg: transparent;
--df-surface: var(--df-dark-2);
--df-surface-sunk: var(--df-dark-1);
/* On navy the ice rung cannot be a pale fill — it would be a hole of
daylight in the card. Same idea inverted: the sunk floor with a little
indigo lit into it, so the well is still the cooler surface without
leaving the dark ground. */
--df-surface-ice: color-mix(in srgb, var(--df-indigo-500) 16%, var(--df-dark-1));
/* THE TABLE'S BANDS GO UP HERE, NOT DOWN (14.09.2026). A table sits ON a
card (--df-surface, dark-2), and painting its header strip and its hover
row at the sunk rung (dark-1) cut two holes in that card: on navy, down
is away from the light, so a darker band reads as a gap in the panel
rather than as a raised strip on it. The overview's approval queue was
the report — the header line and every hovered row looked like the page
showing through the card.
THE MATERIAL IS THE KPI CARD'S. Not a flat rung one step up — the same
`--df-dome-fill` `.df-stat` wears, paired with the rim below: a white
wash that fades out downward, over whatever the card's own fill is. It
is transparent, so the strip is the card lit from above rather than a
second colour laid on it, and the table ends up made of the same stuff
as the cards over it. Light is untouched: there, down IS the sunk rung
and a grey strip on white is exactly right. */
--df-table-head: var(--df-dome-fill);
/* BELOW the darkest rung (2026-09-26): dark-0 (#04091A) is the canvas and
the row-action tile, so the hovered row sinks one step deeper than
anything else on screen — a well, not a lit dome. */
--df-table-row-hover: #01040E;
--df-table-head-rim: rgba(255, 255, 255, .08);
/* The sheet sits on THE dark ground (--df-dark-0), the same rung as the
canvas and the auth door — not one step up on dark-2, which read as a
grey panel over the navy. ONE colour, head included: a lighter head band
made the top of the sheet look like a separate strip laid on it. The
edge is NOT a blue rung — a coloured 1px line reads as a frame, and a
frame is the opposite of an object standing off the page. It is a faint
white rim, and the outset comes from the lift: a lit top edge, a black
contact line under the bottom, a close shadow and a wide, deep one. */
--df-sheet-body: var(--df-canvas);
--df-sheet-bg: var(--df-canvas);
--df-sheet-head: var(--df-canvas);
--df-sheet-edge: rgba(255, 255, 255, .07);
--df-sheet-lift:
inset 0 1px 0 rgba(255, 255, 255, .14),
inset 0 -1px 0 rgba(0, 0, 0, .60),
0 1px 2px rgba(0, 0, 0, .50),
0 10px 24px rgba(0, 0, 0, .45),
0 36px 80px -8px rgba(0, 0, 0, .85);
/* On navy the tile is a WELL — darker than the row, not lighter. navy-800
on navy-900 was one rung and vanished (same report as the light side);
going up further would make a row of pale blocks. Going down puts it at
the canvas's own depth (navy-990, the darkest rung the shell uses). */
--df-row-action-bg: var(--df-dark-0);
/* DARK, not hazy (2026-09-26): the white-mixed tile read as a grey fog.
The tile goes to the canvas's own depth (dark-0) and is separated from
the dark-2 row by light, not by lightness — a 1px top highlight and a
faint hairline ring in the shadow stack, plus a real drop shadow. */
--df-row-action-surface: var(--df-dark-0);
--df-row-action-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 6px rgba(0, 0, 0, .55);
/* Hover in dark is a SOLID deep tint mixed into the tile's own dark-0, not
the translucent `-soft`/`-100` washes — those laid a pale film over the
navy and read as fog ("hover durumu puslu"). */
--df-row-action-hover: color-mix(in srgb, #4F46E5 24%, var(--df-dark-0));
--df-row-action-hover-danger: color-mix(in srgb, #D92D20 26%, var(--df-dark-0));
--df-row-action-hover-success: color-mix(in srgb, #079455 26%, var(--df-dark-0));
--df-border: var(--df-dark-line);
--df-border-strong: var(--df-dark-line-strong);
/* Dark moves the same rung the other way: on a navy surface a control's
edge gets LIGHTER on hover, because "closer to the light" is what reads
as raised here. Same one-rung step, opposite direction. */
--df-border-hover: var(--df-dark-line-strong);
/* Dark never had the light theme's problem: the fill (navy-900) and the
pane behind it already differ, so the edge is a second cue rather than
the only one. The control line therefore stays on the shared rungs. */
--df-control-line: var(--df-border-strong);
--df-control-line-hover: var(--df-border-hover);
/* Dark, from the same Provia source — and the note there is worth keeping,
because it was solved once and is easy to undo by "tidying":
BLACK SHADOW ON BLACK IS INVISIBLE. Depth in dark comes from three things,
none of them optional. (1) The well fill has to be clearly DARKER than the
pane and the surface around it — at --df-surface it was within a hair of
both, which is exactly why the fields read flat. (2) A sharp, barely
blurred black line on the top inner edge. (3) A VISIBLE blue counter-light
on the bottom-right inner edge — the floor of the well catching the light.
Light travelling from the top down to that lip is the whole illusion. */
--df-control-well: #01050F;
--df-control-well-focus: #050B1E;
/* Already opaque here, so the autofill fills are the fills. */
--df-control-well-solid: var(--df-control-well);
--df-control-well-solid-focus: var(--df-control-well-focus);
--df-control-edge: transparent;
--df-drop-line: var(--df-indigo-300);
--df-control-inset:
inset 0 2px 3px -1px rgba(0, 0, 0, 1),
inset 3px 4px 9px -3px rgba(0, 0, 0, .95),
inset -1px -2px 6px -2px rgba(125, 165, 255, .20),
inset 0 -1px 0 rgba(150, 185, 255, .22),
inset 0 0 0 1px rgba(120, 155, 255, .07);
/* On navy the crown is a white wash and the contact line is real black —
a dome is lit from the same place in both themes, it just has less light
to work with. */
--df-dome-fill: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 60%);
--df-dome-shadow:
inset 0 1px 0 rgba(255, 255, 255, .08),
inset 0 -1px 0 rgba(0, 0, 0, .35),
0 1px 1px rgba(0, 0, 0, .35),
0 8px 16px -8px rgba(0, 0, 0, .55);
--df-dome-shadow-hover:
inset 0 1px 0 rgba(255, 255, 255, .10),
inset 0 -1px 0 rgba(0, 0, 0, .35),
0 1px 1px rgba(0, 0, 0, .40),
0 10px 20px -8px rgba(0, 0, 0, .60);
--df-asset-fill: linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .01) 100%);
--df-asset-edge: rgba(255, 255, 255, .08);
--df-asset-edge-hover: rgba(154, 176, 255, .35);
--df-asset-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 14px -6px rgba(0, 0, 0, .45);
--df-asset-shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 28px -12px rgba(0, 0, 0, .60);
--df-asset-metric-fill: linear-gradient(135deg, rgba(59, 130, 246, .10), rgba(99, 102, 241, .14));
--df-asset-metric-hover: linear-gradient(135deg, rgba(59, 130, 246, .16), rgba(99, 102, 241, .20));
--df-asset-metric-edge: rgba(154, 176, 255, .14);
--df-asset-panel: rgba(255, 255, 255, .03);
--df-asset-remove-bg: rgba(240, 68, 56, .08);
--df-asset-remove-edge: rgba(240, 68, 56, .28);
--df-focus-halo: 0 0 0 3px rgba(85, 119, 255, .22);
--df-control-inset-focus:
inset 0 2px 4px -1px rgba(0, 0, 0, 1),
inset 3px 5px 11px -3px rgba(0, 0, 0, 1),
inset -1px -2px 6px -2px rgba(125, 165, 255, .22),
inset 0 -1px 0 rgba(160, 195, 255, .28),
inset 0 0 0 1px rgba(120, 155, 255, .07);
/* The segmented control in dark. The selected fill drops to the canvas tone
while the track stays on the surface, so the segment is a hole cut through
the strip — on navy the fill alone was never enough to say which one was
selected, which is why the ring below is not optional and why the label
goes brand blue as the second signal. */
/* Raised on navy. The drop shadow goes near-black (a tinted shadow on a
dark ground just looks like fog) and the lift is carried by the LIT top
edge instead — a 1px blue filament where the lamp catches the leading
corner, plus a black one underneath to seat it. The panel used to add a
blue counter-glow on its top-left as well; it went with the veil, for
the same reason — light that comes from nowhere is haze. */
--df-panel-shadow:
6px 6px 16px rgba(0, 0, 0, .48),
inset 0 1px 0 rgba(150, 180, 255, .06);
--df-control-raised:
3px 4px 10px rgba(0, 0, 0, .55),
0 1px 2px rgba(0, 0, 0, .40),
inset 0 1px 0 rgba(120, 155, 255, .18),
inset 0 -1px 0 rgba(0, 0, 0, .50);
--df-control-raised-hover:
4px 6px 14px rgba(0, 0, 0, .60),
0 1px 2px rgba(0, 0, 0, .40),
inset 0 1px 0 rgba(120, 155, 255, .26),
inset 0 -1px 0 rgba(0, 0, 0, .50);
--df-tab-track: var(--df-surface);
--df-tab-active-bg: var(--df-dark-0);
--df-tab-active-fg: var(--df-indigo-300);
--df-tab-active-ring:
inset 0 3px 6px -2px rgba(0, 0, 0, .75),
inset 2px 3px 8px -3px rgba(0, 0, 0, .60),
inset -1px -2px 6px -2px rgba(154, 176, 255, .16),
inset 0 0 0 1px rgba(154, 176, 255, .10);
/* Same job on navy, opposite direction: the border token is darker than the
flags themselves there, so the edge has to be light to read at all. */
--df-flag-edge: rgba(255, 255, 255, .26);
--df-ink: var(--df-navy-050);
--df-ink-strong: #FFFFFF;
--df-ink-body: var(--df-navy-200);
--df-ink-muted: var(--df-navy-300);
/* The filled action keeps indigo-600 in both themes: white ink on #365CF5
clears AA (5.2:1), while indigo-500 would not. */
/* STILL NAVY, one rung deeper. Indigo was tried here and is wrong: the
wedge is not an action, and on a page whose only accent is indigo it
turned the page title into the loudest control on the screen.
navy-990 against the badge's navy-900 half is a small step, but it is the
same step the canvas already makes against every card on it — and the
white glyph is what carries the contrast, not the fill. */
--df-mark-wedge: var(--df-dark-0);
--df-mark-wedge-ink: #FFFFFF;
--df-action: var(--df-indigo-600);
--df-action-hover: var(--df-indigo-500);
--df-action-ink: #FFFFFF;
--df-action-link: var(--df-indigo-300);
--df-action-soft: rgba(85, 119, 255, .16);
/* The filled primary again — but on navy the direction reverses. Deepening
it here would sink the button INTO the canvas, which is the opposite of
what a primary action is for, so dark keeps indigo-600 and lifts on
hover. Same two tokens, same two decisions, opposite answers. */
--df-action-fill: var(--df-indigo-600);
--df-action-fill-hover: var(--df-indigo-500);
/* Same filled indigo on the navy canvas — white ink on #365CF5 clears AA
here too, so the CTA does not need a second identity in dark. Hover
resolves through --df-action-hover (indigo-500), deliberately *not*
--df-indigo-700, which the status-pill block below repoints to a light
tint for dark surfaces. */
--df-cta-bg: var(--df-action-fill);
--df-cta-ink: var(--df-action-ink);
--df-cta-hover-bg: var(--df-action-fill-hover);
/* Ghost tint on dark = lightness, not a hue — the same move the sidebar
hover makes one rung lighter. */
--df-ghost-hover-bg: rgba(255, 255, 255, .06);
--df-ghost-active-bg: rgba(255, 255, 255, .12);
--df-accent: var(--df-teal-400);
--df-accent-soft: rgba(15, 168, 154, .18);
--df-flow-line: rgba(63, 208, 193, .22);
--df-flow-dot: rgba(63, 208, 193, .34);
--df-grid-line: rgba(255, 255, 255, .05);
/* The stage keeps its indigo on the navy, one rung brighter: the same alpha
that reads as a hairline on white disappears entirely on a dark surface. */
--df-stage-thread: rgba(154, 176, 255, .26);
--df-stage-node: rgba(154, 176, 255, .50);
--df-stage-tile: var(--df-indigo-500);
--df-focus: var(--df-indigo-500);
/* No fill of its own in dark: the rail sits on the shell's wash
(--df-canvas-wash) like everything else, so the inside is one navy
ground rather than a lighter panel beside a darker page. The crease
(--df-sidebar-border) and the shadow still draw its edge. */
--df-sidebar-bg: transparent;
--df-sidebar-border: var(--df-dark-line);
--df-sidebar-ink: var(--df-navy-050);
--df-sidebar-ink-muted: var(--df-navy-300);
/* On dark, "lifted" is again lighter than the surface — the same rule as
light, expressed as a white wash because navy-800 is a named rung the
panels already use for something else. */
--df-sidebar-hover: rgba(255, 255, 255, .05);
/* On navy there is no "ice" to be had — a pale blue tile would be a light
patch, not a cool one — so the tile stays the white wash, a rung stronger
than hover so it still separates from a lifted row. */
--df-sidebar-tile: rgba(255, 255, 255, .08);
/* On dark the glyph tile IS the table's row-action button: the same
navy-990 well below the surface and the same body ink (2026-09-13,
"tablodaki action butonları ile aynı renkler"). Not the white wash —
that is the hovered row's lift, and a tile the same colour as the row
under it would vanish on hover. */
--df-sidebar-glyph-bg: var(--df-row-action-bg);
--df-sidebar-glyph-ink: var(--df-ink-body);
/* Indigo tinted for a dark surface: a translucent wash of --df-indigo-600
for the well, and the lighter --df-indigo-300 rung for the ink so it
clears contrast on navy. */
--df-sidebar-active-bg: rgba(54, 92, 245, .20);
--df-sidebar-active: var(--df-indigo-300);
/* Depth on dark comes from the shadow going darker and the lit edge going
to a white wash a fifth of the strength — on navy a .70 white top edge
would read as a hairline of light, not as a lit corner. */
--df-sidebar-raised:
0 1px 1px rgba(0, 0, 0, .35),
0 4px 10px rgba(0, 0, 0, .30);
--df-sidebar-raised-strong:
0 1px 2px rgba(0, 0, 0, .40),
0 6px 14px rgba(0, 0, 0, .34);
--df-sidebar-pressed:
inset 0 1px 2px rgba(0, 0, 0, .40);
--df-sidebar-well:
inset 0 2px 4px rgba(0, 0, 0, .32),
inset 0 0 0 1px rgba(85, 119, 255, .22),
inset 0 1px 0 rgba(255, 255, 255, .06);
--df-sidebar-elev: 2px 0 16px rgba(0, 0, 0, .28);
/* On navy the glow is the whole effect — a wash this dark needs the ring and
the pool to carry it, and the ink moves to the light indigo rung so it
clears contrast. */
--df-sidebar-stamp-bg: rgba(54, 92, 245, .18);
--df-sidebar-stamp-ink: var(--df-indigo-300);
--df-sidebar-stamp-glow:
0 0 0 1px rgba(85, 119, 255, .30),
0 2px 10px rgba(54, 92, 245, .22);
--df-sidebar-chip-bg: rgba(255, 255, 255, .07);
--df-sidebar-chip-ink: var(--df-navy-200);
/* On dark the inversion runs the other way — a near-black tip on a navy
panel would disappear into it. */
--df-sidebar-tip-bg: var(--df-dark-3);
--df-sidebar-tip-ink: var(--df-navy-050);
/* ---- Ink band ---- two rungs above the canvas now that the canvas is
navy-990, and left there on purpose: the band is a strip that has to read
as an object ON the page, and the deeper ground gives it that for free. */
--df-band-bg: var(--df-dark-2);
--df-band-elev: var(--df-dark-3);
--df-band-border: var(--df-dark-line);
--df-band-ink: #FFFFFF;
--df-band-ink-body: var(--df-navy-200);
--df-band-ink-muted: var(--df-navy-300);
--df-band-accent: var(--df-teal-400);
--df-band-link: var(--df-indigo-300);
/* Same value as light: the band is navy in both themes, so the motif that
sits on it has no reason to change. Declared twice rather than hoisted to
:root so the two band blocks stay readable as one unit each. */
--df-band-flow: rgba(63, 208, 193, .34);
--df-band-flow-dot: rgba(63, 208, 193, .55);
/* In dark there is no light panel to fall back on: the product panel is the
next rung up the same ramp, which keeps the contrast step without
inventing a white rectangle in the middle of a dark page. */
--df-panel-bg: var(--df-dark-3);
--df-panel-sunk: rgba(255, 255, 255, .04);
--df-panel-border: var(--df-dark-line);
--df-panel-ink: #FFFFFF;
--df-panel-ink-body: var(--df-navy-200);
/* navy-300 on navy-800 measures 4.24:1 — fine for a 24px metric, short of AA
for the 12px system labels these panels are full of. In dark the muted rung
therefore collapses onto the body rung: contrast outranks hierarchy. */
--df-panel-ink-muted: var(--df-navy-200);
/* On dark surfaces elevation comes from lightness, not a coloured halo. */
--df-shadow: 0 1px 2px rgba(0, 0, 0, .40);
--df-shadow-lift: 0 2px 6px rgba(0, 0, 0, .45), 0 16px 32px rgba(0, 0, 0, .35);
/* THE PAGE HEADER WEARS THE SHEET'S MATERIAL (2026-09-13, product
decision: "modalın renginden olabilir — rengi tam görmek istiyorum").
It was dark-2 graded into dark-3: two rungs, so the band got lighter
towards the right and the header read as a grey strip laid on the navy
— the same complaint the sheet itself answered when it dropped from
dark-2 onto the ground. The dialog is the newest dark surface in the
product and the one the reader meets most deliberately, so it is the
one the header now copies: `--df-sheet-bg`, at BOTH gradient stops.
ONE FLAT, FULLY OPAQUE COLOUR. Both stops are the same token, so the
`linear-gradient` the component draws resolves to a single hex — no
second rung, no alpha, nothing of the canvas showing through. The only
thing over it is the pair of waves, and they are the brand mark at 3-7%.
The band still stands off the page, and for the sheet's reason rather
than a colour's: a lit top edge, a black contact line under the bottom
and two diffused shadows. `--df-sheet-lift`'s deepest 80px spread is
left off — that one is sized for a dialog floating over a scrim, and on
a 56px band in the flow it pools under the header like a stain. */
--df-pagehead-bg: var(--df-sheet-bg);
--df-pagehead-tint: var(--df-sheet-bg);
--df-pagehead-border: var(--df-sheet-edge);
--df-pagehead-shadow:
inset 0 1px 0 rgba(255, 255, 255, .14),
inset 0 -1px 0 rgba(0, 0, 0, .60),
0 1px 2px rgba(0, 0, 0, .50),
0 10px 24px rgba(0, 0, 0, .45);
--df-pagehead-wave-1: rgba(85, 119, 255, .07);
--df-pagehead-wave-2: rgba(85, 119, 255, .035);
--df-pagehead-tile-top: rgba(85, 119, 255, .14);
--df-pagehead-tile-bottom: rgba(85, 119, 255, .26);
--df-pagehead-tile-ring: rgba(85, 119, 255, .22);
--df-pagehead-tile-ink: var(--df-indigo-300);
--df-pagehead-cta-shadow: 0 6px 16px rgba(0, 0, 0, .35);
/* ---- "Veriye sor" workspace — dark (see the light block). */
--df-dq-shell-bg: #060C1F;
--df-dq-bar-bg: #070F28;
--df-dq-bar-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(96, 130, 250, .10);
--df-dq-thread-bg: #050B1C;
--df-dq-dots: rgba(255, 255, 255, .028);
--df-dq-edge: rgba(96, 130, 250, .18);
--df-dq-ink: #E4EAF1;
--df-dq-ink-2: #A9BCD2;
--df-dq-ink-3: #8B9DB8;
--df-dq-hover-bg: rgba(205, 220, 255, .08);
--df-dq-tab-bg: #0E1B3E;
--df-dq-tab-hover-bg: #101F45;
--df-dq-navy: #14275C;
--df-dq-navy-hover: #0F1D47;
--df-dq-navy-ink: #E9F0FF;
--df-dq-raise-xs: 1px 1px 3px rgba(0, 0, 0, .30), -1px -1px 2px rgba(96, 130, 250, .05), inset 0 1px 0 rgba(96, 130, 250, .12);
--df-dq-raise-md: 3px 4px 10px rgba(0, 0, 0, .60), 0 1px 2px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(120, 155, 255, .20), inset 0 -1px 0 rgba(0, 0, 0, .55);
--df-dq-well: inset 3px 3px 7px rgba(0, 0, 0, .55), inset -2px -2px 5px rgba(120, 155, 255, .05), inset 0 0 10px rgba(120, 155, 255, .06), inset 0 0 0 1px rgba(120, 155, 255, .13);
--df-dq-tool-bg: #060C1F;
--df-dq-tool-hover-bg: #050B1E;
--df-dq-control-bg: #060C1F;
--df-dq-control-shadow: 3px 4px 10px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(120, 155, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .50);
--df-dq-control-active: inset 3px 3px 7px rgba(0, 0, 0, .55), inset -2px -2px 5px rgba(120, 155, 255, .05), inset 0 0 10px rgba(120, 155, 255, .06), inset 0 0 0 1px rgba(120, 155, 255, .13);
--df-dq-card-bg: #060C1F;
--df-dq-card-ink: #DDE6F8;
--df-dq-card-shadow: 4px 4px 12px rgba(0, 0, 0, .35), -3px -3px 8px rgba(96, 130, 250, .045), inset 0 1px 0 rgba(96, 130, 250, .10), 0 0 0 1px rgba(96, 160, 255, .10), 0 0 14px rgba(96, 160, 255, .06);
--df-dq-user-bg: #0B1735;
--df-dq-user-ink: #E4EAF1;
--df-dq-user-shadow: 0 10px 22px rgba(0, 0, 0, .46), 0 3px 7px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .50), 0 0 0 1px rgba(96, 160, 255, .10);
--df-dq-chip-ink: #93B4F5;
--df-dq-badge-l-bg: #050C22;
--df-dq-badge-l-ink: #A9BCE4;
--df-dq-badge-m-bg: #1D44A3;
--df-dq-badge-m-ink: #FFFFFF;
--df-dq-badge-r-bg: #0B1531;
--df-dq-badge-r-ink: #8EA1C8;
--df-dq-composer-bg: #070F26;
--df-dq-composer-well: inset 0 2px 6px rgba(0, 0, 0, .42);
--df-dq-composer-focus: inset 0 3px 9px rgba(0, 0, 0, .52);
--df-dq-composer-ring: rgba(91, 141, 239, .22);
--df-dq-composer-ring-on: rgba(91, 141, 239, .45);
--df-dq-send-bg: #1D44A3;
--df-dq-send-hover: #173889;
--df-dq-send-ink: #FFFFFF;
--df-dq-placeholder: #6F80A4;
--df-dq-popover-bg: #050B1E;
--df-dq-popover-edge: rgba(96, 130, 250, .10);
--df-dq-popover-shadow: 0 18px 44px rgba(0, 0, 0, .55);
--df-dq-ctx-bg: #060C1F;
--df-dq-ctx-ink: #93B4F5;
--df-dq-ctx-ring: rgba(147, 180, 245, .30);
--df-dq-warn-bg: rgba(255, 179, 0, .16);
--df-dq-warn-ink: #FFB300;
--df-dq-danger-ink: #EF6B6B;
/* Market card palette on navy: the washes go translucent so the card's
own dark surface shows through, the strong steps stay lit. */
--df-mkt-violet-wash: rgba(196, 123, 238, .10);
--df-mkt-violet-soft: rgba(196, 123, 238, .18);
--df-mkt-violet-mid: rgba(196, 123, 238, .42);
--df-mkt-violet-strong: #C990F0;
--df-mkt-violet-ink: #D7A6F5;
--df-mkt-blue-wash: rgba(92, 125, 255, .10);
--df-mkt-blue-soft: rgba(92, 125, 255, .18);
--df-mkt-blue-mid: rgba(92, 125, 255, .42);
--df-mkt-blue-strong: #7D97FF;
--df-mkt-blue-ink: #9AB0FF;
--df-mkt-orange-wash: rgba(255, 154, 74, .10);
--df-mkt-orange-soft: rgba(255, 154, 74, .18);
--df-mkt-orange-mid: rgba(255, 154, 74, .42);
--df-mkt-orange-strong: #FFAA66;
--df-mkt-orange-ink: #FFB984;
--df-mkt-chip-bg: rgba(255, 255, 255, .06);
--df-ov-green-wash: rgba(60, 194, 127, .10);
--df-ov-green-soft: rgba(60, 194, 127, .18);
--df-ov-green-mid: rgba(60, 194, 127, .42);
--df-ov-green-strong: #5BD394;
--df-ov-green-ink: #7FDFAE;
--df-ov-rose-soft: rgba(229, 66, 107, .20);
--df-ov-rose-ink: #F58AA5;
--df-ov-clear-bg: rgba(60, 194, 127, .10);
--df-ov-clear-edge: rgba(60, 194, 127, .24);
--df-ov-clear-mark: #3CC27F;
--df-ov-item-bg: var(--df-dark-2);
--df-ov-item-edge: var(--df-dark-line);
--df-ov-item-hover: var(--df-dark-3);
color-scheme: dark;
}
/* Status pills resolve per theme so they never rely on colour alone —
each one is always paired with a text label in the markup. */
[data-theme="dark"] {
--df-success-100: rgba(6, 118, 71, .22);
--df-success-700: #6BE0A8;
--df-warning-100: rgba(181, 71, 8, .22);
--df-warning-700: #FDC57B;
--df-info-100: rgba(23, 92, 211, .22);
--df-info-700: #93C0FF;
--df-info-200: rgba(23, 92, 211, .38);
--df-danger-100: rgba(180, 35, 24, .22);
--df-danger-700: #FCA5A5;
--df-teal-100: rgba(15, 168, 154, .18);
--df-teal-700: var(--df-teal-400);
--df-indigo-100: rgba(85, 119, 255, .16);
--df-indigo-700: var(--df-indigo-300);
}
/* ============================================================
Data-viz palette (M9 dashboards, 25.09.2026)
Seven categorical slots in FIXED order, never cycled — an eighth series
folds into "Diğer" (`--df-viz-other`). Slot 1 is the brand indigo; the
rest are the dataviz reference hues minus violet (violet left the app on
2026-09-06 and does not come back as "series 7").
Validated with the dataviz validator, not by eye:
light (#FCFCFB): lightness/chroma/normal-vision PASS; adjacent CVD
ΔE 7.2 (floor band) and slots 3/4/5 under 3:1 → relief is mandatory:
every chart ships a legend for ≥2 series, a 2px surface gap between
fills and a table view under it.
dark (#131A2A): every check PASS.
Dark values are SELECTED steps of the same hues, not a flip.
============================================================ */
:root,
[data-theme="light"] {
--df-viz-1: #365CF5;
--df-viz-2: #EB6834;
--df-viz-3: #1BAF7A;
--df-viz-4: #EDA100;
--df-viz-5: #E87BA4;
--df-viz-6: #008300;
--df-viz-7: #E34948;
--df-viz-other: #A3ACBD;
--df-viz-grid: #E6E9F0;
--df-viz-axis: #667085;
--df-viz-up: #067647;
--df-viz-down: #B42318;
}
[data-theme="dark"] {
--df-viz-1: #5577FF;
--df-viz-2: #D95926;
--df-viz-3: #199E70;
--df-viz-4: #C98500;
--df-viz-5: #D55181;
--df-viz-6: #008300;
--df-viz-7: #E66767;
--df-viz-other: #56607A;
--df-viz-grid: #1C2640;
--df-viz-axis: #9AA6C2;
--df-viz-up: #6BE0A8;
--df-viz-down: #FCA5A5;
}
/* ============================================================
Sayfa Rehberi button — kırık sarı (04.10.2026). Help is not an action,
so the head's guide button must not read as one more grey verb beside
the page's real ones. A muted cream, never the warning orange.
============================================================ */
:root,
[data-theme="light"] {
--df-guide-btn-bg: #FBF3D9;
--df-guide-btn-bg-hover: #F6E9BF;
--df-guide-btn-line: #E8D49A;
--df-guide-btn-ink: #6B5414;
}
[data-theme="dark"] {
--df-guide-btn-bg: rgba(232, 196, 104, .14);
--df-guide-btn-bg-hover: rgba(232, 196, 104, .22);
--df-guide-btn-line: rgba(232, 196, 104, .36);
--df-guide-btn-ink: #EED79A;
}
/* ============================================================
Market preparation · Kontrol Listesi (04.10.2026): the head button in a
soft indigo of its own, and the tick a done item wears.
============================================================ */
:root,
[data-theme="light"] {
--df-checklist-btn-bg: #EEF2FF;
--df-checklist-btn-bg-hover: #E0E7FF;
--df-checklist-btn-line: #C7D2FE;
--df-checklist-btn-ink: #2747D7;
--df-checklist-tick-bg: #E4EAFF;
--df-checklist-tick-ink: #2747D7;
}
[data-theme="dark"] {
--df-checklist-btn-bg: rgba(85, 119, 255, .16);
--df-checklist-btn-bg-hover: rgba(85, 119, 255, .26);
--df-checklist-btn-line: rgba(154, 176, 255, .38);
--df-checklist-btn-ink: #9AB0FF;
--df-checklist-tick-bg: rgba(85, 119, 255, .20);
--df-checklist-tick-ink: #9AB0FF;
}
/* ============================================================
FluvBI · pano arka planı (08.10.2026, Murat): the ready-made backdrops a
panel can sit on (`Fluvbi.py` BACKGROUND_PRESETS). Quiet on purpose — the
cards are the reading, the backdrop only frames them. `-ink` is the
pattern drawn over `dots` / `grid`.
============================================================ */
:root,
[data-theme="light"] {
--df-board-bg-mist: #F1F4F9;
--df-board-bg-sky: #EAF1FF;
--df-board-bg-mint: #E9F7F1;
--df-board-bg-sand: #FAF4E8;
--df-board-bg-blush: #FBEFF3;
--df-board-bg-dots: #F7F9FC;
--df-board-bg-dots-ink: #CBD5E4;
--df-board-bg-grid: #F8FAFD;
--df-board-bg-grid-ink: #E3E9F2;
--df-board-bg-slate: #DDE3EC;
}
[data-theme="dark"] {
--df-board-bg-mist: #0B1326;
--df-board-bg-sky: #0A1638;
--df-board-bg-mint: #08201C;
--df-board-bg-sand: #1E1A10;
--df-board-bg-blush: #22121B;
--df-board-bg-dots: #070E20;
--df-board-bg-dots-ink: #1F2A44;
--df-board-bg-grid: #070E20;
--df-board-bg-grid-ink: #141E36;
--df-board-bg-slate: #141B2B;
}