/* Mosaic tokens, light theme - copied from appcircleio/mosaic@38cee57 src/tokens.
 * Do not edit by hand: re-copy from Mosaic. Dark theme is left out on purpose; the login
 * page has no theme switch. */

/* --- color/light.css --- */
/* Light theme — a remap of the dark theme's names, per DESIGN.md.
 *
 * Dark is the design's home; this file redefines the same semantic vocabulary for a light
 * page — and since the product's call of 2026-08-22 it keeps dark's physics instead of
 * inverting them: the page is the *lightest* thing on the screen and every panel is a step
 * away from it, exactly as dark's page is the darkest thing and every panel a step up. The
 * earlier light theme ran the ladder the other way (white panels on a grey page, shadows
 * doing the raising) and the two themes disagreed about what a surface means; now one
 * mental model covers both. Nothing here is a new name — a token that exists only in one
 * theme is a bug.
 *
 * Every foreground/background pair keeps its measured ratio in a comment. Where DESIGN.md
 * retired a legacy trade-off (`on-primary`, `danger`), the passing value recorded beside
 * the old trade-off is what landed here.
 */
:root,
:root[data-theme="light"] {
  /* --- accent ------------------------------------------------------------ */
  /* Vibrant Orange, both themes (product call, 2026-08-24): the lighter Primary Orange
     "sacma renk olmus acik temada" — washed out on white. `#ff7a0d` everywhere; the hover
     lightens to the old base. One value and one motion state since 2026-08-27, when
     `primary-active` (read by nothing) and `focus-ring` were both retired — see below. */
  --mos-color-primary: #ff7a0d;
  --mos-color-primary-hover: #ff8f34;
  /* Deep Navy from the press kit — dark's value, and the system's one ink on a brand fill
     (2026-08-27). 6.73:1 on `primary`, 7.73:1 on the hover. See the note in `dark.css`. */
  --mos-color-on-primary: #071837;

  /* --- surface ladder (mirrored from dark) ---------------------------------- */
  /**
   * The page is the lightest thing on the screen and every rung steps away from it —
   * dark's ladder in a mirror. Ratios are against the page:
   *   canvas    #ffffff  ·  the page — and the sidebar, which is the page
   *   surface-1 #f5f7fa  ·  panels, inputs                    (1.07:1)
   *   surface-2 #f2f4f8  ·  cards, dialogs — raised by fill   (1.10:1)
   *   surface-3 #f0f2f7  ·  hover fills, badge grounds        (1.12:1)
   *   surface-4 #eef1f6  ·  the chosen row                    (1.13:1)
   * `surface-4` is the ceiling, not a taste: it is the darkest ground a status tone is
   * read on, and every tone below still clears 4.5:1 there — `ink-subtle` lands on 4.50
   * exactly. A darker rung would take the whole tone set with it.
   */
  --mos-color-canvas: #ffffff;
  --mos-color-surface-1: #f5f7fa;
  --mos-color-surface-2: #f2f4f8;
  --mos-color-surface-3: #f0f2f7;
  --mos-color-surface-4: #eef1f6;
  /**
   * The ground of a control that cannot be edited. `surface-4`'s value, because in this theme
   * the ladder already steps *away* from the page — see the dark file, where "quieter" is the
   * opposite direction and this token is the canvas.
   */
  --mos-color-sunken: #eef1f6;

  /* --- hairlines ---------------------------------------------------------- */
  /* `hairline` darkened one step with the ladder (its old `#edf0f5` was 1.06:1 against the
     new panels — a divider the panels could swallow); 1.18:1 on the page, 1.10:1 on
     surface-1. `hairline-tertiary` bounds interactive controls: 3.28:1 on surface-1,
     3.52:1 on the page — past WCAG 1.4.11's 3:1. Do not lighten it. */
  --mos-color-hairline: #e8ecf2;
  --mos-color-hairline-strong: #dfe4ec;
  --mos-color-hairline-tertiary: #7b8a9e;

  /* --- ink ramp ----------------------------------------------------------- */
  /* Ratios: on page / on surface-1. */
  --mos-color-ink: #071837; /* 17.57 / 16.38  AAA */
  --mos-color-ink-muted: #3a4d66; /*  8.63 /  8.04  AAA */
  --mos-color-ink-subtle: #616f85; /*  5.10 /  4.75  AA — and 4.50 on surface-4, the floor */
  --mos-color-ink-tertiary: #52637a; /* placeholders, disabled labels — 5.09:1 on a
                                        disabled fill, still quieter than ink-muted */

  /* No `inverse-*` family here either — see the note in `dark.css`. Worth recording because it
     is the reason the replacement costs nothing on this theme: the island's two values *were*
     `ink` and `canvas`, exactly. `inverse-canvas` was `#071837`, which is this theme's `ink`;
     `inverse-ink` was `#ffffff`, which is its `canvas`. */

  /* --- semantic tones ----------------------------------------------------- */
  /**
   * Voices, not fills. Each is the tone's *legible* form on a light ground, and — retuned
   * 2026-08-23 on the product's call — its *vivid* form too: the first pass (#397739,
   * #b3261e, #a35a00) was darkened so far toward AA that on a white page the three read as
   * one pastel family; a card of status dots said nothing at a glance. These are the most
   * saturated values of each hue that still clear AA as text on `surface-1`, measured:
   *   success  #1a7f37  5.08:1 on white, 4.73 on surface-1 — an unmistakable green
   *   danger   #d1242f  5.24:1 on white, 4.89 on surface-1 — a red that reads as red,
   *                     not as brick
   *   warning  #b8860b  3.25:1 on white, 3.03 on surface-1 — goldenrod, and the one
   *                     deliberate break with AA-as-text in the set. Three rounds
   *                     (2026-08-23): #a35a00 read as pastel, #a16207 as a second orange,
   *                     #8f6a00 as olive — every yellow dark enough for 4.5:1 stops being
   *                     yellow. The product chose the colour that *reads as yellow* and
   *                     holds the 3:1 non-text bar, which is what the tone mostly is (the
   *                     `Dot`, a badge's border); as running text it is sub-AA and the
   *                     words beside it are what carry the claim (WCAG 1.4.1 discipline —
   *                     a status is never said by its colour alone).
   * The known trade beyond that: on `surface-4` (the chosen row) success and danger sit a
   * shade under the 4.5 the first pass held everywhere. Accepted knowingly.
   */
  /**
   * Dark's values verbatim (product call, 2026-08-24, "sorgulama"): the light-tuned set
   * above — #1a7f37 / #d1242f / #b8860b — never read as the same three voices as dark's,
   * and the product chose one palette over per-theme legibility tuning. The measured cost,
   * recorded rather than hidden: as *text* on white, success is 2.4:1, danger 3.4:1 and
   * warning 1.6:1 — all sub-AA — so on light these tones carry dots, icons and fills, and
   * the words beside them carry the claim (WCAG 1.4.1 discipline, unchanged).
   */
  --mos-color-success: #6fba6c;
  /**
   * **Red, and read as red** (product call, 2026-09-19: "beyaz temada belli olmuyor, delete rengi
   * yeterince kirmizi degil"). It was `#c94141`, this theme's own `danger-active` promoted to the
   * rest state on 2026-08-29 because a white label needed 4.5:1 on it - and at R201 G65 B65 that
   * red is three parts to one, which on a white page reads brick rather than danger. It showed
   * first on the quiet `tone="danger"` button, where the colour is the *label* and has nothing
   * but itself to say "this deletes".
   *
   * `#da1212` is that red with the grey taken all the way out - R218 G18 B18, a saturation of
   * 0.92 where `#c94141` was 0.68 and the intermediate `#d32f2f` 0.78 (2026-09-19, twice: "daha
   * kirmizi olsun", then "beyaz temayi da kizart biraz daha").
   *
   * Every floor it has to clear, it clears higher than the colour it replaces: as text on the
   * page 5.15:1 (was 4.87), on the chosen row 4.55:1 (4.42), and white on it as a fill 4.55:1.
   * That last one is what stops the red going further: brighter than this and the filled
   * button's own white label drops under 4.5:1. The ladder above it is unchanged, mixed toward
   * `ink`: hover and pressed stay the most legible states.
   */
  --mos-color-danger: #da1212;
  --mos-color-warning: #ffbb57;

  /* --- overlay, shadow, focus ---------------------------------------------- */
  /* Deep Navy at 45%: a neutral black scrim reads as dirt over a navy-inked UI. */
  --mos-color-backdrop: rgb(7 24 55 / 0.45);
  /* The ladder carries depth here too, since it mirrors dark's; the shadows serve the
     floats a hairline cannot — a tooltip bubble, a menu over content. */
  --mos-color-shadow-weak: rgb(7 24 55 / 0.06);
  --mos-color-shadow-normal: rgb(7 24 55 / 0.1);
  --mos-color-shadow-strong: rgb(7 24 55 / 0.16);
  /**
   * **There is no ring token any more, and this is the trade-off that buys (product call,
   * 2026-08-27).** The ring is `--mos-color-primary` in both themes now. On this page the
   * brand orange measures **2.43:1** against `surface-1` and 2.61 against the canvas — under
   * the 3:1 WCAG 2.4.11 asks of a keyboard focus indicator. The darkened `#c25600` that used
   * to sit here cleared it at 4.54:1, and the product chose one accent over a second orange:
   * the ring is the brand, and a ring that is a different colour from the button it lands on
   * is a second accent by another name.
   *
   * This is the same class of decision as the brand label's 2.6:1 on `.primary` — knowingly
   * sub-conformant, recorded rather than hidden, and pinned by `tests/focus-ring.spec.ts` so
   * it cannot drift further without someone editing that number on purpose. The ring's
   * *shape* still carries it: 2px solid, on the edge, one recipe everywhere.
   */

  /* --- legacy slots with theme-specific values ------------------------------ */
  /* Scheduled for deletion with the repo rewrite; per-theme values, so they live here. */
  /* The accent as a foreground — the brand orange itself (product call, 2026-08-24): the
     darkened legible form (#b34e00) is what read as "sacma" on light. As text on white it
     is 2.6:1, sub-AA, accepted knowingly; the focus ring above keeps its own darkened
     value because a keyboard indicator answers to 2.4.11's 3:1. */
  --mos-color-primary-text: #ff7a0d;
  /* Links are the accent with an underline. */
  --mos-color-link: #ff7a0d;
  --mos-color-link-hover: #ff8f34;
  /**
   * **White, and the red under it is a step darker on this page** (product call, 2026-08-29: "beyaz
   * temada kırmızı butonun içinde delete yazısı çok koyu kalıyor … yeni renkler üretmeden
   * çözelim").
   *
   * The label was `#071837`, the navy every filled control carries — correct by the rule and heavy
   * to read: a destructive button is the one control that should look like a warning rather than
   * like a dark word on a pink box.
   *
   * The arithmetic is why the fill moved with it. On the old light red (`#e05d5d`) white measures
   * **3.56:1**, under the 4.5 a button's own label answers to, so the navy was the only passing
   * pairing there. `#c94141` is not a new colour — it is this theme's own `danger-active`, the
   * bottom of its red ladder, promoted to the rest state. White on it is **4.87:1**, and the ladder
   * is rebuilt above it by mixing toward `ink`: hover 5.63, pressed 6.58, so the worst interaction
   * state is the most legible, which is the rule the filled buttons already follow.
   *
   * The tone gains elsewhere too: as *text* on white `#c94141` is 4.87 where `#e05d5d` was 3.56 —
   * one of the sub-AA costs recorded above this block is simply gone.
   */
  --mos-color-text-on-danger: #ffffff;
  /* Darker with the press, by mixing the rest fill toward this theme's ink — no second red. */
  --mos-color-danger-hover: color-mix(in srgb, var(--mos-color-danger) 90%, var(--mos-color-ink));
  --mos-color-danger-active: color-mix(in srgb, var(--mos-color-danger) 80%, var(--mos-color-ink));

  /* --- platform marks ------------------------------------------------------ */
  /**
   * The tile a build framework's glyph sits in, one fill per framework — the frameworks'
   * own colours, from the product's platform assets. Content colours, not theme colours:
   * declared once here and not remapped, the same reason `primary` does not move.
   */
  --mos-color-platform-android: #9be3bc;
  --mos-color-platform-flutter: #60a8eb;
  --mos-color-platform-react-native: #7ed5f0;
  --mos-color-platform-smartface: #00a1f1;
  /**
   * The glyph on those four fills — fixed like them. White on `#9be3bc` is 1.49:1, so the
   * ink is dark on all four: android 11.81, react-native 10.6, flutter 6.94, smartface
   * 6.17 — all past 1.4.11's 3:1, and a set inked one way reads as a set.
   */
  --mos-color-platform-ink: #071837;
}

/* --- space.css --- */
/* Spacing — Linear's eight named steps, per DESIGN.md.
   A 4px grid with deliberate gaps: there is no 20, no 40 and no 64 — a scale that contains
   every value is not a scale. The old numeric names (1·2·3·4·5·6·8·10·12·16·24) were migrated
   in one pass: the surviving values renamed, the three dead ones rounded down to a neighbour
   (20→16, 40→32, 64→48) — density over air, which is the scale's own bias.
   `section` exists only *between* page sections, never inside one. */
:root {
  --mos-space-xxs: 0.25rem; /*  4px */
  --mos-space-xs: 0.5rem; /*  8px */
  --mos-space-sm: 0.75rem; /* 12px */
  --mos-space-md: 1rem; /* 16px */
  --mos-space-lg: 1.5rem; /* 24px */
  --mos-space-xl: 2rem; /* 32px */
  --mos-space-xxl: 3rem; /* 48px */
  --mos-space-section: 6rem; /* 96px */
}

/* --- type.css --- */
/* Typography.
 *
 * **Four sizes, and that is the whole scale**: 12, 13, 14, 16 (2026-09-01: "o zaman typography'i
 * bu 4 boyutla sınırlandır … isimlendirmeleri 4'e düşür"). An audit of every stylesheet in the
 * library found that the thirteen published steps were rendering words at exactly four sizes — the
 * rest were either aliases of those four under a second name (`caption`, `eyebrow` and `mono` were
 * all 12; `body-sm` and `button` were both 13) or tiers nothing used at all (`card-title`,
 * `headline`, the three `display` cuts). A scale is a promise about what a size *means*; a scale
 * with nine names for four sizes cannot keep it, because the name a call site picks stops being a
 * decision.
 *
 * What each one is for:
 *
 *   xs  12  the second line — a subtitle, help, an error, a row's metadata, a badge, a
 *           taxonomy label (rule 31's lower half)
 *   sm  13  the inside of a control and the library's reading text — an input's value, a
 *           button's label, a tab, a menu row, a cell
 *   md  14  a name — a field's label, a card's title, a panel's heading, a page title
 *           (rule 31's upper half)
 *   lg  16  the two places a heading is genuinely larger: a `Dialog`'s title and a `Stat`'s value
 *
 * **Each step is a set of four.** A size on its own is not a typographic step; the line height and
 * the tracking belong to it, and the weight is part of its voice. So every step declares `-size`,
 * `-leading`, `-tracking` and `-weight` under one name, and a caller sets four properties from one
 * row:
 *
 *   font-size:      var(--mos-text-md-size);
 *   line-height:    var(--mos-text-md-leading);
 *   letter-spacing: var(--mos-text-md-tracking);
 *   font-weight:    var(--mos-text-md-weight);
 *
 * **Sizes in `rem`, tracking in `em`, leading unitless.** px is wrong for a library whose
 * accessibility rule is that a reader who raises their browser font size gets a proportionally
 * larger layout. `rem` scales the size; `em` makes the tracking scale *with* it; unitless leading
 * does the same for the line.
 *
 * **The numbers are Linear's text tier, one notch down** — their product UI runs a ~13px base, not
 * their site's 16px, and the product moved every step down a notch on 2026-08-22 to match. What
 * this scale does *not* contain, deliberately: no weight above 600, no tracking beyond ±0.6%, and
 * no display tier. Anything larger than 16 in this library is an icon's glyph box, not type.
 */
:root {
  --mos-text-xs-size: 0.75rem; /* 12px */
  --mos-text-xs-leading: 1.4;
  --mos-text-xs-tracking: 0;
  --mos-text-xs-weight: 400;

  --mos-text-sm-size: 0.8125rem; /* 13px */
  --mos-text-sm-leading: 1.5;
  --mos-text-sm-tracking: 0;
  --mos-text-sm-weight: 400;

  --mos-text-md-size: 0.875rem; /* 14px */
  --mos-text-md-leading: 1.5;
  --mos-text-md-tracking: -0.0031em; /* -0.04px at 14px */
  --mos-text-md-weight: 400;

  --mos-text-lg-size: 1rem; /* 16px */
  --mos-text-lg-leading: 1.5;
  --mos-text-lg-tracking: -0.0056em; /* -0.09px at 16px */
  --mos-text-lg-weight: 400;

  /* --- the one modifier ---------------------------------------------------- */
  /**
   * A taxonomy label — a table's column head, a `Stat`'s caption, a group's name in a menu — is
   * `xs` with this tracking and `--mos-weight-medium`. It was its own step (`eyebrow`) at the same
   * 12px as `xs`, which made it a fifth name for the fourth size; what actually distinguished it
   * was never the size but the *positive* tracking, the only one in the library. Set against text
   * that tracks negative, +3% reads as a label about the section rather than a line in it, so the
   * tracking survives the collapse as a modifier and the step does not.
   */
  --mos-text-label-tracking: 0.0308em; /* +0.37px at 12px */

  /* --- emphasis weights ---------------------------------------------------- */
  /**
   * A step carries its own resting weight, but "the same size, said harder" — a row's name, a
   * chosen tab — is an axis the sizes cannot express without changing size too (2026-08-21).
   */
  --mos-weight-regular: 400;
  --mos-weight-medium: 500;
  --mos-weight-semibold: 600;

  /* --- families --------------------------------------------------------- */
  /**
   * One face.
   *
   * `--mos-font-display` used to point at a second, parked cut for a display tier that no longer
   * exists; with the scale at four product sizes there is nothing for a display face to set, so
   * the token is gone rather than left resolving to the text stack. Reopening that is a decision
   * about a typeface, not a token rename.
   *
   * Worth recording, since it was measured: `"Inter var"` and `"Inter"` do not resolve in
   * **Storybook**, which loads no font, so this library's own canvas renders in the platform's UI
   * font. In `ac-web-app` they do — it imports `inter-ui/inter.css` — so the product has been
   * rendering in Inter all along and only the library's preview was showing something else.
   */
  --mos-font-sans:
    "Inter var", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mos-font-mono:
    ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", "Roboto Mono",
    monospace;
}

/* --- radius.css --- */
/* Corner radii — Linear's scale, and their use for each step.
 *
 * The values are theirs verbatim: 4 · 6 · 8 · 12 · 16 · 24 · pill. Two steps were missing here
 * (`xs` and `xxl`) and two carried a different number than the spec (`md` was 6 and is 8; `lg` was
 * 10 and is 12), which is why buttons and cards change shape slightly with this file.
 *
 * The names are Mosaic's existing ones so that nothing has to be renamed at three hundred call
 * sites; where Linear's name differs, it is in the comment.
 */
:root {
  --mos-radius-xs: 4px; /* Linear xs — small chips, status badges */
  --mos-radius-sm: 6px; /* Linear sm — inline tags */
  --mos-radius-md: 8px; /* Linear md — all buttons and form inputs */
  --mos-radius-lg: 12px; /* Linear lg — cards, panels, dialogs */
  --mos-radius-xl: 16px; /* Linear xl — full-width panels, empty states */
  --mos-radius-xxl: 24px; /* Linear xxl — oversized banners, rare */
  --mos-radius-pill: 9999px; /* Linear pill — avatars, pills, toggles */
}

/* --- layer.css --- */
/* Layering — writing a raw z-index is forbidden.
   The gap of 10 between layers exists for ordering *within* a layer:
     z-index: calc(var(--mos-layer-modal) + var(--mos-stack-depth, 0)); */
:root {
  --mos-layer-base: 0; /* normal flow */
  --mos-layer-raised: 10; /* cards, dropdown triggers */
  --mos-layer-sticky: 20; /* sticky headers, table headers */
  --mos-layer-overlay: 30; /* backdrops */
  --mos-layer-modal: 40; /* modals */
  --mos-layer-popover: 50; /* menus, tooltips, combobox lists */
  --mos-layer-toast: 60; /* notifications */
}

/* --- motion.css --- */
/* Motion — one notation only. Never 0.2s where 200ms is meant. */
:root {
  --mos-duration-fast: 100ms; /* hover, focus, color */
  --mos-duration-base: 200ms; /* open/close, dropdowns */
  --mos-duration-slow: 300ms; /* modals, page transitions */

  --mos-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --mos-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Declared once, globally — never per component. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mos-duration-fast: 1ms;
    --mos-duration-base: 1ms;
    --mos-duration-slow: 1ms;
  }
}

/* --- shadow.css --- */
/* Shadows build on color tokens, never fixed rgba(), so they stay correct
   when the theme changes. */
:root {
  --mos-shadow-sm: 0 1px 2px var(--mos-color-shadow-weak);
  --mos-shadow-md: 0 2px 8px var(--mos-color-shadow-normal);
  --mos-shadow-lg: 0 8px 24px var(--mos-color-shadow-strong);
}

/**
 * **The edge family.** A shadow used where a line used to be — one amount, four directions.
 *
 * The three above all point down, which is what a card or a menu needs. An edge is different: a
 * navigation panel is divided from the page along a *vertical* line, a sheet's header from the
 * body it scrolls under along a horizontal one. So the direction is in the name, spelled the way
 * the logical property it replaces is — `edge-inline-end` stands in for `border-inline-end`.
 * `box-shadow` has no logical form, so these are the only direction-dependent shadows here; an
 * RTL build would swap which inline one a side uses.
 *
 * **The amount is one variable, deliberately.** It was two — the inline pair on `shadow-strong`
 * and a deeper offset on the block pair — and every edge in the product is one of these four, so
 * two amounts meant two things to keep in agreement for no gain the eye could name. Change
 * `--mos-shadow-edge-offset`, `-blur` or `-color` and every edge in the library moves together.
 *
 * Measured with the current amount, panel to the darkest pixel beside or below it:
 *   navigation panel's side   1.28:1 light, 1.11:1 dark
 *   a sheet's header band     1.12:1 light, 1.05:1 dark, fading over ~14px
 * For scale: the lines these replaced were 1.28 at `--mos-color-hairline-strong` and 1.14 at
 * `border-weak`. It was `6px`/`shadow-strong` first, which measured 1.40 and 1.27 — correct on
 * paper and read as heavy in the product, which is what brought it here.
 */
:root {
  --mos-shadow-edge-offset: 4px;
  --mos-shadow-edge-blur: 12px;
  --mos-shadow-edge-color: var(--mos-color-shadow-normal);

  --mos-shadow-edge-inline-end: var(--mos-shadow-edge-offset) 0
    var(--mos-shadow-edge-blur) var(--mos-shadow-edge-color);
  --mos-shadow-edge-inline-start: calc(-1 * var(--mos-shadow-edge-offset)) 0
    var(--mos-shadow-edge-blur) var(--mos-shadow-edge-color);
  --mos-shadow-edge-block-end: 0 var(--mos-shadow-edge-offset)
    var(--mos-shadow-edge-blur) var(--mos-shadow-edge-color);
  --mos-shadow-edge-block-start: 0 calc(-1 * var(--mos-shadow-edge-offset))
    var(--mos-shadow-edge-blur) var(--mos-shadow-edge-color);
}