/* =====================================================================
   tokens.css — the design system's single source of truth.

   THE PALETTE IS FIXED. It is not editable from Settings and not stored
   in the database. Five decisions, and everything else derived:

       dark green   the sidebar
       primary      a lighter green for buttons, links, active state
       white        every panel, card and table
       light grey   the page behind them
       danger       destructive actions and failures

   Success, warning and info exist because an interface that says
   "locked" in the same red it says "deleted" is lying to the reader.
   They are held to the same family so they never look bolted on.
   ===================================================================== */

:root {
    /* -- Green ramp ---------------------------------------------------
       One hue. The sidebar is the deep end of it, the buttons the
       middle, the tints the shallow end. */
    --green-900: #0a3527;   /* sidebar                        */
    --green-800: #0d4634;   /* sidebar hover / raised          */
    --green-700: #10513c;   /* sidebar active                  */
    --green-600: #0f6b52;   /* PRIMARY - buttons, links        */
    --green-100: #e6f1ee;   /* tint behind active nav, badges  */
    --green-200: #c6ded6;   /* tinted borders                  */

    /* -- Neutrals -----------------------------------------------------
       Page grey is the familiar social-feed grey: light enough that
       white cards lift off it, dark enough that they have an edge. */
    --white:     #ffffff;
    --grey-050:  #f7f9fa;
    --grey-100:  #f0f2f5;   /* PAGE background                 */
    --grey-200:  #e6e9ee;   /* hairlines                       */
    --grey-300:  #d3d8e0;   /* control borders                 */
    --grey-500:  #8b95a5;   /* placeholder, disabled text      */
    --grey-600:  #65707f;   /* secondary text                  */
    --grey-700:  #47515f;   /* body text on white              */
    --grey-900:  #1c1e21;   /* headings                        */

    /* -- Semantic ----------------------------------------------------- */
    --red-600:   #b42318;   /* DANGER                          */
    --red-050:   #fdeceb;
    --red-200:   #f6cdc9;

    --amber-700: #b54708;   /* warning: locked, sensitive      */
    --amber-050: #fdf3e6;
    --amber-200: #f5dfbc;

    --blue-700:  #175cd3;   /* info: neutral notices           */
    --blue-200:  #b4cdf7;
    --blue-050:  #eaf1fd;

    /* -- Roles ---------------------------------------------------------
       Everything below this line refers to a role, never to a colour.
       Components use these; they never reach for --green-600 directly. */
    --c-brand:       var(--green-600);
    --c-brand-dark:  var(--green-700);
    --c-brand-darker: var(--green-800);
    --c-brand-tint:  var(--green-100);
    --c-brand-line:  var(--green-200);

    --c-page:        var(--grey-100);
    --c-surface:     var(--white);
    --c-sunken:      var(--grey-050);
    --c-line:        var(--grey-200);
    --c-line-strong: var(--grey-300);

    --c-ink:         var(--grey-900);
    --c-ink-2:       var(--grey-700);
    --c-ink-3:       var(--grey-600);
    --c-ink-4:       var(--grey-500);

    --c-ok:          var(--green-600);
    --c-ok-tint:     var(--green-100);
    --c-ok-line:     var(--green-200);

    --c-warn:        var(--amber-700);
    --c-warn-tint:   var(--amber-050);
    --c-warn-line:   var(--amber-200);

    --c-bad:         var(--red-600);
    --c-bad-tint:    var(--red-050);
    --c-bad-line:    var(--red-200);

    --c-info:        var(--blue-700);
    --c-info-tint:   var(--blue-050);
    --c-info-line:   var(--blue-200);

    /* -- Sidebar ------------------------------------------------------ */
    --c-nav:         var(--green-900);
    --c-nav-hover:   var(--green-800);
    --c-nav-active:  var(--green-700);
    --c-nav-line:    rgba(255, 255, 255, .09);
    --c-nav-ink:     rgba(255, 255, 255, .76);
    --c-nav-ink-dim: rgba(255, 255, 255, .48);

    /* The rail's emphatic ink, its raised surfaces and its focus ring.
       Tokens rather than a literal #fff, because a light rail needs all
       four of them the other way up and a hard-coded white simply
       disappears. */
    --c-nav-ink-strong: #fff;
    --c-nav-raise:      rgba(255, 255, 255, .12);
    --c-nav-ring:       rgba(255, 255, 255, .70);
    --c-nav-scroll:     rgba(255, 255, 255, .18);

    /* -- Focus -------------------------------------------------------- */
    --ring:     0 0 0 3px rgba(15, 107, 82, .18);
    --ring-bad: 0 0 0 3px rgba(180, 35, 24, .16);

    /* -- Geometry ----------------------------------------------------- */
    --radius-xs:   6px;    /* tags, tiny chips                      */
    --radius-sm:   9px;    /* inputs, selects, buttons, row actions */
    --radius:      12px;   /* cards, dropdowns, modals              */
    --radius-lg:   16px;   /* the sign-in panel                     */
    --radius-pill: 999px;

    /* -- Layering ------------------------------------------------------
       One scale, written down. Every overlay in the app reads from it,
       which is what stops a row-action menu appearing underneath the
       table it belongs to. */
    --z-header:     1020;
    --z-dropdown:   1030;   /* above the sticky header, below the drawer */
    --z-scrim:      1035;
    --z-sidebar:    1040;
    --z-modal:      1055;
    --z-select2:    1060;
    --z-swal:       1065;
    --z-toast:      1070;

    --sidebar-w: 258px;
    --header-h:  62px;
    --gutter:    26px;

    /* -- Elevation -----------------------------------------------------
       Cards get a border and the faintest lift. Only menus, modals and
       toasts genuinely float. */
    --shadow-xs: 0 1px 2px rgba(28, 30, 33, .04);
    --shadow-sm: 0 1px 2px rgba(28, 30, 33, .05), 0 1px 3px rgba(28, 30, 33, .04);
    --shadow-md: 0 8px 24px -6px rgba(28, 30, 33, .12), 0 3px 8px -4px rgba(28, 30, 33, .06);
    --shadow-lg: 0 28px 56px -16px rgba(28, 30, 33, .24), 0 8px 20px -8px rgba(28, 30, 33, .10);

    /* -- Type ---------------------------------------------------------- */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* The sidebar carries its own size: a menu and a table are read
       differently, and somebody who wants bigger navigation does not
       necessarily want a bigger spreadsheet. */
    --fs-nav: 14px;

    --fs-xs:  11.5px;
    --fs-sm:  13px;
    --fs-md:  14px;
    --fs-lg:  16px;
    --fs-xl:  22px;
    --fs-2xl: 29px;

    /* -- Motion --------------------------------------------------------- */
    --ease:     cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t-fast:   .12s;
    --t-mid:    .22s;
    --t-slow:   .4s;
}

/* Anyone who has asked their OS to stop animations gets none. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}