/* =============================================================================
   blueprint-tokens.css — design tokens for the CMS visual language
   Source of truth: docs/design-brief/design_handoff_cms/assets/tokens.css
   (Claude Design project fbf31217-1887-47a0-a2f1-1fa9f1b9a446, v2 2026-09-17).
   The token names and values are that file VERBATIM — never rename one, and
   never invent one that is not here. If the design needs a new value it is
   added to the handoff first and copied down.

   ── Why this is a separate file from cms-tokens.css ──────────────────────────
   It is not an extension of the old tokens; it is a different visual language,
   and several names mean different things in the two:

       --row     old: zebra-row background colour   new: 40px row HEIGHT
       --r-6     old: 16px                          new: 6px
       --bg      old: #FAFAF9 (warm)                new: #EEF0F6 (cool)
       --border  old: rgba(15,17,19,.07)            new: #E1E4EE
       --success old: #00B281 (emerald)             new: #1B8A5A
       --qa-ncr  old: #e11d48                       new: #D9313D
       --ease-out old: cubic-bezier(.16,1,.3,1)     new: cubic-bezier(.2,.8,.2,1)

   Loading both into one document would silently restyle every legacy screen.
   So this file is loaded ONLY by layouts/cms.blade.php, which loads no legacy
   stylesheet at all: the two languages never meet in one document, and a screen
   moves over by changing which layout it extends. Nothing legacy is touched.

   ── Theme ───────────────────────────────────────────────────────────────────
   <html data-theme="light|dark"> pins a theme. No attribute — or "system" —
   follows prefers-color-scheme. Both are spelled out below because a token
   defined only inside a media query has no value when the user pins the
   opposite theme.
   ========================================================================== */

:root {
    /* ---- brand --------------------------------------------------------- */
    --cms-primary: #1F4FD8;
    --cms-navy:    #0B1F5C;
    --cms-accent:  #FFB800;   /* three meanings ONLY: critical path,
                                 AI proposal, primary on-site action */

    /* ---- light theme --------------------------------------------------- */
    --bg:       #EEF0F6;
    --grid:     rgba(11, 31, 92, .045);
    --surface:  #FFFFFF;
    --surface2: #EEF0F6;
    --ink:      #131A33;
    --muted:    #5B6480;
    --border:   #E1E4EE;

    --primary:        #1F4FD8;
    --dark-pill:      #131A33;
    --dark-pill-ink:  #FFFFFF;
    --late-bg:        #FFF1F2;
    --warn-bg:        #FFF8E6;

    /* ---- semantic ------------------------------------------------------ */
    --success: #1B8A5A;
    --warning: #D98E04;
    --danger:  #D9313D;
    --info:    #1F4FD8;

    --success-bg:  #E3F4EC;
    --warning-bg:  #FFF3D6;
    --warning-ink: #8A5A00;
    --danger-bg:   #FFF1F2;
    --info-bg:     #E4EBFF;

    /* ---- task status --------------------------------------------------- */
    --st-todo:     #8E97B8;
    --st-doing:    #1F4FD8;
    --st-paused:   #D98E04;
    --st-late:     #D9313D;
    --st-done:     #1B8A5A;
    --st-critical: #FFB800;

    /* ---- QA document types --------------------------------------------- */
    --qa-ncr: #D9313D;
    --qa-def: #E8641B;
    --qa-wir: #1F4FD8;
    --qa-maf: #0F8C8C;
    --qa-mos: #6E4BD8;
    --qa-fwa: #1B8A5A;

    /* ---- delay causes -------------------------------------------------- */
    --dl-weather:  #1F4FD8;
    --dl-material: #D98E04;
    --dl-design:   #6E4BD8;
    --dl-sub:      #D9313D;
    --dl-permit:   #0F8C8C;

    /* ---- roles --------------------------------------------------------- */
    --role-pm:     #1F4FD8;
    --role-eng:    #0F8C8C;
    --role-sup:    #1B8A5A;
    --role-sub:    #D98E04;
    --role-client: #6E4BD8;

    /* ---- type ---------------------------------------------------------- */
    /* Georgian is the primary language: Noto Sans Georgian carries all UI
       text. Archivo is Latin display only (logo, KPI numerals) and IBM Plex
       Mono is for IDs, dates, money and percentages. Georgian text is never
       uppercased and never letter-spaced. */
    --font-ui:      'Noto Sans Georgian', 'Noto Sans', system-ui, sans-serif;
    /* ⚠️ Noto Sans Georgian sits between Archivo and the system font, and it is there for
       one character: ₾. Archivo has no lari sign, so a headline figure like "₾62M" falls
       back per-character and on a machine whose system font lacks it too — which is most
       Linux — the money on the biggest number on the page renders as a box. Archivo still
       wins for every Latin glyph it has, which is all of them. */
    --font-display: 'Archivo', 'Noto Sans Georgian', sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

    --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
    --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px;
    --fs-40: 40px; --fs-64: 64px; --fs-96: 96px;

    --lh-tight:   1;
    --lh-heading: 1.3;
    --lh-body:    1.55;

    /* ---- spacing, 4-pt ------------------------------------------------- */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
    --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

    /* ---- radii --------------------------------------------------------- */
    /* 14 input · 16 card · 20 panel · 24 hero · 999 pill */
    --r-6: 6px; --r-8: 8px; --r-12: 12px; --r-14: 14px; --r-16: 16px;
    --r-18: 18px; --r-20: 20px; --r-24: 24px; --r-pill: 999px;

    /* ---- sizes --------------------------------------------------------- */
    --row:           40px;   /* a data-table row */
    --control:       44px;   /* a button */
    --input:         48px;
    --touch:         48px;
    --capture:       64px;
    --rail:          88px;
    --rail-expanded: 256px;
    --tab-height:    72px;

    /* ---- elevation ----------------------------------------------------- */
    /* Surfaces have NO border. Depth is shadow only. */
    --shadow-1:     0 1px 2px rgba(11, 31, 92, .06);
    --shadow-2:     0 8px 24px rgba(11, 31, 92, .14);
    --shadow-3:     0 12px 32px rgba(11, 31, 92, .18);
    --shadow-modal: 0 24px 60px rgba(11, 31, 92, .35);

    /* ---- motion -------------------------------------------------------- */
    --ease-out:  cubic-bezier(.2, .8, .2, 1);
    --dur-fast:  150ms;
    --dur-base:  250ms;
    --dur-slow:  350ms;

    /* ---- blueprint grid ------------------------------------------------ */
    /* Navy surfaces and page backgrounds only. Never behind a table. */
    --grid-step:         40px;
    --grid-step-sm:      24px;
    --grid-line-on-navy: rgba(255, 255, 255, .07);

    /* ---- document markup viewer ---------------------------------------- */
    --mk-cloud:          #D9313D;
    --mk-pin:            #D9313D;
    --mk-measure:        #1F4FD8;
    --mk-resolved:       #1B8A5A;
    --mk-stroke:         2px;
    --mk-stroke-selected: 3px;
    --doc-zoom-min:      .5;
    --doc-zoom-max:      4;
    --doc-zoom-step:     .25;
    --doc-panel-w:       360px;
    --doc-panel-h-tablet: 300px;
}

/* ---- dark theme --------------------------------------------------------
   Only the tokens that differ. Declared twice on purpose: once for the pinned
   theme, once for the system preference when nothing is pinned. A `:root:not(
   [data-theme="light"])` guard on the media query is what lets a user pin
   light on a dark-mode machine and still get light. */

:root[data-theme="dark"] {
    --bg:       #0A1229;
    --grid:     rgba(255, 255, 255, .05);
    --surface:  #111A38;
    --surface2: #1A2448;
    --ink:      #EEF1FA;
    --muted:    #8E97B8;
    --border:   #22305A;

    --primary:       #5B82F0;
    --dark-pill:     #EEF1FA;
    --dark-pill-ink: #0A1229;
    --late-bg:       #2A1520;
    --warn-bg:       #2A2210;

    --success-bg:  #123A2A;
    --warning-bg:  #3A2E10;
    --warning-ink: #FFC64D;
    --danger-bg:   #2A1520;
    --info-bg:     #1B2B5E;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:       #0A1229;
        --grid:     rgba(255, 255, 255, .05);
        --surface:  #111A38;
        --surface2: #1A2448;
        --ink:      #EEF1FA;
        --muted:    #8E97B8;
        --border:   #22305A;

        --primary:       #5B82F0;
        --dark-pill:     #EEF1FA;
        --dark-pill-ink: #0A1229;
        --late-bg:       #2A1520;
        --warn-bg:       #2A2210;

        --success-bg:  #123A2A;
        --warning-bg:  #3A2E10;
        --warning-ink: #FFC64D;
        --danger-bg:   #2A1520;
        --info-bg:     #1B2B5E;

        --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    }
}

/* ---- „სიმჭიდროვე · კომპაქტური" (profile R2d) ---------------------------
   The person's own choice (ProfilePrefs density → <html data-bp-density>),
   for a mouse only: on a finger the targets keep their 44–48px, whatever the
   setting says. Rows, buttons and fields shrink a step and the larger gaps
   tighten; the 4/8px steps stay, they are what keeps text off an edge. The
   component paddings that are literal are tightened at the end of
   blueprint.css. */
@media (pointer: fine) {
    :root[data-bp-density="cmp"] {
        --row:     34px;
        --control: 38px;
        --input:   42px;
        --sp-4: 14px; --sp-5: 16px; --sp-6: 20px; --sp-8: 28px; --sp-12: 40px;
    }
}