/* ============================================================================
   OMP:SCP — design tokens
   The token set from SCP_REDESIGN_PROPOSAL.md §3, verbatim.

   This file contains custom properties only. No selectors that paint, no
   components, no layout. If you are adding a rule here that has a declaration
   other than `--something: value`, it belongs in app.css.

   Dark is the only theme in v1. Light is deliberately deferred, but every
   colour below is a variable so it becomes a swap rather than a rewrite.
   ========================================================================== */

:root {

    /* ---- Canvas & surfaces -------------------------------------------- */
    --bg:              #0B0C0E;   /* page canvas - flat, no image, no blobs */
    --surface:         #111214;   /* cards, sidebar, panels                 */
    --surface-raised:  #17181B;   /* popovers, menus, dialogs, table header */
    --surface-hover:   #1C1D21;   /* row / item hover                       */

    /* ---- Lines --------------------------------------------------------- */
    --border:          #232529;   /* default 1px hairline                   */
    --border-strong:   #2E3138;   /* inputs, focused cards, dividers        */
    --border-accent:   #3A2F6B;   /* accent-tinted border on selected items */

    /* ---- Text ---------------------------------------------------------- */
    --text:            #E8E9EB;   /* primary                                */
    --text-muted:      #9BA1A9;   /* secondary, labels, metadata            */
    --text-subtle:     #6B7280;   /* timestamps, placeholders, disabled     */

    /* ---- Accent -------------------------------------------------------- *
     * Purple survives so the product still reads as OMP:SCP, at a lower
     * chroma than the old #9C88FF. The old value could not carry white text
     * at 4.5:1; #6E56CF does, which is why primary buttons are legible now. */
    --accent:          #6E56CF;
    --accent-hover:    #7C68DA;
    --accent-subtle:   rgba(110, 86, 207, 0.12);
    --accent-text:     #B4A6F5;

    /* ---- State --------------------------------------------------------- *
     * One hue per meaning. Never decorative - if it is coloured, it is
     * reporting state. Greyscale is the default for everything else.       */
    --success:         #30A46C;
    --success-subtle:  rgba(48, 164, 108, 0.12);
    --warning:         #F5A524;
    --warning-subtle:  rgba(245, 165, 36, 0.12);
    --danger:          #E5484D;
    --danger-subtle:   rgba(229, 72, 77, 0.12);
    --info:            #3B9EFF;
    --info-subtle:     rgba(59, 158, 255, 0.12);

    /* ---- Typography ---------------------------------------------------- */
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

    /* 6 sizes, down from ~9. text-sm is the workhorse. */
    --text-xs:    12px;  --lh-xs:   16px;  /* metadata, table cells, badges  */
    --text-sm:    13px;  --lh-sm:   20px;  /* body, buttons, inputs, nav     */
    --text-base:  14px;  --lh-base: 20px;  /* card titles                    */
    --text-lg:    16px;  --lh-lg:   24px;  /* section headings               */
    --text-xl:    20px;  --lh-xl:   28px;  /* page titles                    */
    --text-2xl:   24px;  --lh-2xl:  32px;  /* the one biggest number         */

    /* 3 weights, down from 6. Nothing heavier than 600. */
    --fw-body:     400;
    --fw-medium:   500;
    --fw-semibold: 600;

    /* ---- Radii --------------------------------------------------------- */
    --radius-sm:  4px;   /* badges, chips, inline code                      */
    --radius-md:  6px;   /* buttons, inputs, table cells  <- default        */
    --radius-lg:  8px;   /* cards, panels                                   */
    --radius-xl:  12px;  /* dialogs, sheets                                 */
    /* No rounded-full containers. Only avatars and status dots are circles. */

    /* ---- Spacing (4px base) -------------------------------------------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;

    --card-pad:   16px;  /* desktop override below */
    --page-gutter: 16px;

    /* ---- Elevation ----------------------------------------------------- *
     * Cards and panels get NO shadow - a 1px border does the work.
     * Shadow is reserved for things that genuinely float above the page.   */
    --shadow-none: none;
    --shadow-pop:  0 8px 24px rgba(0, 0, 0, 0.35);

    /* ---- Motion -------------------------------------------------------- */
    --t-fast: 120ms cubic-bezier(0.2, 0, 0, 1);  /* hover, focus, colour    */
    --t-base: 180ms cubic-bezier(0.2, 0, 0, 1);  /* sheets, drawers, dialogs*/

    /* ---- Focus (was missing almost everywhere) ------------------------- */
    --focus-ring:   2px solid var(--accent);
    --focus-offset: 2px;

    /* ---- Touch target --------------------------------------------------
     * A token, not a per-component decision. 44 on mobile, 40 on desktop.  */
    --tap: 44px;

    /* ---- Shell metrics -------------------------------------------------- */
    --sidebar-w:    240px;
    --topbar-h:     52px;
    --dutybar-h:    44px;
    --content-max: 1440px;
}

@media (min-width: 768px) {
    :root {
        --card-pad:    20px;
        --page-gutter: 24px;
        --tap:         40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --t-fast: 0ms;
        --t-base: 0ms;
    }
}