/*
| Design tokens — "Kirma + Murekkep" (3a), design/00 Tokenlar.dc.html
|
| The single source. No colour, spacing, radius or shadow value is written
| anywhere else; tests/Arch/FrontendTest.php enforces that. Values are copied
| verbatim from the handoff, so changing one here changes it everywhere —
| which is the whole point of the layer.
|
| Fed to every front end EXCEPT Filament, which carries its own palette
| (AD-25, kod-yerlesimi.md 4).
*/

@theme {
    /* Neutral scale — one grey-blue axis, eight steps */
    --color-ink-950: #1e262e;
    --color-ink-800: #3d4954;
    --color-ink-600: #5a6771;
    --color-ink-400: #78858f;
    --color-ink-300: #95a5a6;
    --color-ink-200: #b7c1c9;
    --color-ink-100: #d9dfe3;
    --color-ink-50: #e7ebee;

    /*
    | ⛔ The product landing's GROUND, and the only two values on that page the
    | panels have no use for (design `L01`). They are one surface with `ink-950`
    | — a gradient that lifts twice — rather than a second colour: nothing is
    | ever tinted, bordered or lettered in them.
    */
    --color-ground-mid: #22303e;
    --color-ground-high: #2c4256;

    /*
    | ⚠ And the pale end of the same idea: the ground a capability panel sits
    | on and the stage a screenshot floats above (design `L01`). Between
    | `surface` and `bg` — the panels have nothing that fine, and a marketing
    | page reads as flat without it.
    */
    --color-ground-soft: #f7f9fa;
    --color-ground-stage: #edf2f6;

    /* Surfaces */
    --color-surface: #ffffff;
    --color-bg: #eef1f3;
    --color-bg-sunken: #e6eaed;

    /* Accent — one colour: action, link, active state, focus ring.
       Never decoration. */
    --color-accent-600: oklch(0.5 0.1 243);
    --color-accent-700: oklch(0.42 0.1 243);
    --color-accent-50: #e0ebf3;

    /* Semantic quartets — dot / fg / bg / border.
       Blue never describes a problem. The same colour means the same thing
       everywhere: badge, banner, bar and timeline share these four. */
    --color-critical-dot: #c4553f;
    --color-critical-fg: #a8442f;
    --color-critical-bg: #f6e3de;
    --color-critical-border: #e8cfc7;

    --color-warning-dot: #d98e32;
    --color-warning-fg: #9a5b15;
    --color-warning-bg: #f8e9d4;
    --color-warning-border: #ead6b5;

    --color-caution-dot: #c9a227;
    --color-caution-fg: #7d650f;
    --color-caution-bg: #f7efcf;
    --color-caution-border: #e7dba8;

    --color-success-dot: #4e9a6e;
    --color-success-fg: #2e6b4f;
    --color-success-bg: #dfede5;
    --color-success-border: #c4dccb;

    --color-info-dot: #3f7fac;
    --color-info-fg: #21618c;
    --color-info-bg: #e0ebf3;
    --color-info-border: #c4d7e5;

    /* Provenance, not severity (design `64`). A permission held THROUGH
       something else — a role, a package — is neither good nor bad news, and
       every semantic colour would have said it was. Deliberately outside the
       quartet so it can never be mistaken for a state. */
    --color-role-fg: #5d5488;
    --color-role-bg: #ece9f4;
    --color-role-border: #d8d2e6;

    --color-neutral-dot: #95a5a6;
    --color-neutral-fg: #4a5866;
    --color-neutral-bg: #e7ebee;
    --color-neutral-border: #d5dce1;

    /* Data visualisation — 8 colours, colour blindness safe.
       The order is fixed: series 1 always starts at viz-1. The blue-orange
       anchor pair separates under deuteranopia and protanopia. */
    --color-viz-1: #3f7fac;
    --color-viz-2: #d98e32;
    --color-viz-3: #4e9a6e;
    --color-viz-4: #7b6fa8;
    --color-viz-5: #c4553f;
    --color-viz-6: #c9a227;
    --color-viz-7: #2e8b74;
    --color-viz-8: #8b98a2;

    /* Typography. UI in Archivo, code and identifiers in IBM Plex Mono. */
    --font-sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /*
    | ⛔ One step above `display`, and it exists for ONE surface: the product
    | landing's hero (design `L01`, 60/1.06/900). The designer added it to the
    | scale rather than beside it — *"token içi kalındı"* — because a marketing
    | hero that invented its own size would be the first crack in a type scale
    | two panels share.
    |
    | ⚠ Nothing in the panels uses it. A screen that reached for it would be
    | shouting in a room where everything else speaks at `display`.
    */
    --text-display-xl: 3.75rem;
    --text-display-xl--line-height: 1.06;
    --text-display-xl--font-weight: 900;
    --text-display-xl--letter-spacing: -0.09rem;

    --text-display: 2.125rem;
    --text-display--line-height: 2.5rem;
    --text-display--font-weight: 800;
    --text-display--letter-spacing: -0.075rem;

    --text-h1: 1.5625rem;
    --text-h1--line-height: 2rem;
    --text-h1--font-weight: 800;
    --text-h1--letter-spacing: -0.019rem;

    --text-h2: 1.25rem;
    --text-h2--line-height: 1.75rem;
    --text-h2--font-weight: 800;
    --text-h2--letter-spacing: -0.0125rem;

    --text-h3: 0.9375rem;
    --text-h3--line-height: 1.375rem;
    --text-h3--font-weight: 800;
    --text-h3--letter-spacing: -0.0125rem;

    --text-body: 0.84375rem;
    --text-body--line-height: 1.25rem;
    --text-body--font-weight: 500;

    --text-small: 0.78125rem;
    --text-small--line-height: 1.125rem;
    --text-small--font-weight: 500;

    --text-caption: 0.71875rem;
    --text-caption--line-height: 1rem;
    --text-caption--font-weight: 500;

    --text-micro: 0.65625rem;
    --text-micro--line-height: 0.875rem;
    --text-micro--font-weight: 700;
    --text-micro--letter-spacing: 0.1rem;

    /* Spacing — 4px grid */
    --spacing: 0.25rem;

    /* Radius */
    --radius-chip: 4px;
    --radius-input: 8px;
    --radius-banner: 10px;
    --radius-card: 12px;
    --radius-pill: 999px;

    /*
    | ⛔ THE LAYER ABOVE THE MODAL (EGT-135, Tayfun 14.08.2026).
    |
    | Every dropdown this product opens is teleported to `<body>` so a card
    | cannot clip it (EGT-119). That moved them OUT of the modal's stacking
    | context as well — and they carried `z-40` while every modal, drawer and
    | picker carries `z-50`. The list was drawn, positioned and then covered:
    | somebody opening the training picker inside "Kalem ekle" clicked and saw
    | nothing at all.
    |
    | ⚠ A token rather than a number in seven files. Seven copies is how one of
    | them stays behind the next overlay somebody adds.
    */
    --z-index-layer: 60;

    /* Shadow — floating layers only. A card carries a border, not a shadow. */
    --shadow-overlay: 0 4px 16px rgba(30, 38, 46, 0.12);
    --shadow-modal: 0 12px 32px rgba(30, 38, 46, 0.18);

    /* Breakpoints */
    --breakpoint-sm: 375px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1440px;

    /*
    | Paper (HANDOFF, A4 printing).
    |
    | ⛔ Three values that exist ONLY on paper, and they are here because this
    | is where colour values live — a hex in a stylesheet is the thing the arch
    | rule forbids, and print is not an exception to it.
    |
    | ⚠ They are NOT the screen palette. Ink is black rather than `ink-950`
    | because a near-black prints grey on a mono laser; paper is pure white
    | because a tinted background costs toner and swallows the text on it; the
    | rule is a mid grey that survives a photocopy, which the screen's hairline
    | does not.
    */
    --color-print-ink: #000;
    --color-print-paper: #fff;
    --color-print-rule: #999;
}