/* ==========================================================================
   ParticleLabeler — Design tokens

   The palette and typeface are taken from particle-metrix.com, read out of the
   site's own CSS variables rather than guessed from screenshots:

     --color-accent / --color-heading / --color-body   #08213F
     --color-accent-hover                              #04101F
     --color-header-links-hover / --color-star         #FF5733
     --color-form-border                               #747680
     typeface                                          Montserrat

   Note how orange is used there: not for primary actions, but for hover,
   ratings and "look here". Filled buttons are navy with white text. The same
   division is kept here — navy acts, orange draws attention.

   Component styles must never hard-code a raw value that exists here.
   ========================================================================== */

:root {
    color-scheme: light;

    /* --- Brand -------------------------------------------------------- */
    --pm-navy-900: #04101f;   /* accent-hover on the site */
    --pm-navy-800: #08213f;   /* the corporate navy */
    --pm-navy-700: #0c2e55;
    --pm-navy-600: #113b6c;
    --pm-navy-500: #1a5091;
    --pm-navy-100: #e6ecf3;

    --pm-orange-700: #b8330f;  /* dark enough for text on white */
    --pm-orange-600: #e8431f;
    --pm-orange-500: #ff5733;  /* the corporate orange */
    --pm-orange-400: #ff7a5c;
    --pm-orange-100: #ffe8e2;

    /* --- Measurement overlays -----------------------------------------
       Colours for marks drawn on microscopy frames. These are chosen for
       legibility on dark, low-contrast images and are deliberately NOT brand
       colours: navy vanishes on a dark frame, and orange collides with the
       marker that means "corrected". Changing these changes what a labeler can
       see, not how the product looks. */
    --marker-detection: #54d7e0;
    --marker-fit:       #7ee0e8;
    --marker-manual:    #4ecf95;
    --marker-adjusted:  #ecb44c;
    --marker-uncertain: #eea448;
    --marker-unlikely:  #f2617a;
    --marker-selected:  #ffd166;

    /* --- Neutrals ----------------------------------------------------- */
    --neutral-0:   #ffffff;
    --neutral-25:  #fcfcfd;
    --neutral-50:  #f6f7f9;
    --neutral-100: #eef0f4;
    --neutral-200: #e1e4ea;
    --neutral-300: #cdd2db;
    --neutral-400: #9aa1ae;
    --neutral-500: #747680;   /* the site's form border colour */
    --neutral-600: #4d515c;
    --neutral-700: #343842;
    --neutral-800: #21242c;
    --neutral-900: #12141a;

    /* --- Semantic status ----------------------------------------------
       Kept independent of the brand: a warning must not be mistaken for an
       accent, and the accent must not be mistaken for a warning. */
    --success-600: #0f7a4d;
    --success-500: #17945e;
    --success-100: #dcf3e7;
    --warning-600: #9a5b00;
    --warning-500: #c07a09;
    --warning-100: #fbeed5;
    --danger-600:  #a32020;
    --danger-500:  #c62a32;   /* the site's sale badge */
    --danger-100:  #fbe0e0;
    --info-600:    var(--pm-navy-600);
    --info-500:    var(--pm-navy-500);
    --info-100:    var(--pm-navy-100);

    /* --- Surfaces ----------------------------------------------------- */
    --surface-canvas:   var(--neutral-50);
    --surface-raised:   var(--neutral-0);
    --surface-sunken:   var(--neutral-100);
    --surface-inverted: var(--pm-navy-800);
    --surface-hover:    var(--neutral-50);
    --surface-active:   var(--neutral-100);

    /* --- Text --------------------------------------------------------- */
    --text-strong:   var(--pm-navy-800);
    --text-default:  #2c2d2e;          /* the site's body grey */
    /* One step darker than the site's #747680, which it uses for borders rather than
       text: at the sizes used here that value falls just under the 4.5:1 contrast
       needed for body copy. */
    --text-muted:    #5c5f6a;
    --text-subtle:   var(--neutral-400);
    --text-on-brand: #ffffff;
    --text-link:     var(--pm-navy-600);
    --text-link-hover: var(--pm-orange-600);

    /* --- Borders ------------------------------------------------------ */
    --border-subtle: var(--neutral-200);
    --border-default: var(--neutral-300);
    --border-strong: var(--neutral-400);
    --border-focus:  var(--pm-navy-500);

    /* --- Spacing scale (4px base) ------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* --- Radius -------------------------------------------------------
       The site keeps square corners on form controls and full pills on its
       call-to-action buttons. Dense application controls sit between the two. */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 14px;
    --radius-pill: 999px;

    /* --- Elevation ---------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(8, 33, 63, .06);
    --shadow-sm: 0 1px 3px rgba(8, 33, 63, .09), 0 1px 2px rgba(8, 33, 63, .04);
    --shadow-md: 0 4px 12px rgba(8, 33, 63, .11), 0 1px 3px rgba(8, 33, 63, .05);
    --shadow-lg: 0 12px 32px rgba(8, 33, 63, .15), 0 2px 8px rgba(8, 33, 63, .07);
    --shadow-focus: 0 0 0 3px rgba(26, 80, 145, .25);

    /* --- Typography ---------------------------------------------------
       Montserrat is served from this host; see fonts.css for why. */
    --font-sans: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-mono: "Cascadia Mono", "SF Mono", ui-monospace, Consolas, "Liberation Mono", monospace;

    --text-xs:   0.6875rem;
    --text-sm:   0.8125rem;
    --text-base: 0.875rem;
    --text-md:   1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;
    --text-3xl:  2.25rem;

    --leading-tight: 1.2;
    --leading-snug:  1.35;
    --leading-normal: 1.55;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* --- Layout ------------------------------------------------------- */
    --brandbar-height: 78px;
    --sidebar-width: 244px;
    --sidebar-width-collapsed: 64px;
    --content-max: 1560px;

    /* --- Motion ------------------------------------------------------- */
    --ease-out: cubic-bezier(.2, .8, .3, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 280ms;

    --z-sticky: 100;
    --z-overlay: 500;
    --z-modal: 600;
    --z-toast: 700;
}

/* --------------------------------------------------------------------------
   Dark workspace — scoped to the labeling screen, not a global theme.
   Microscopy frames are dark and low in contrast; a bright chrome around them
   measurably degrades how well faint particles can be judged.
   -------------------------------------------------------------------------- */
.theme-workspace {
    color-scheme: dark;

    --surface-canvas:   #070d16;
    --surface-raised:   #0f1826;
    --surface-sunken:   #0a111c;
    --surface-hover:    #172236;
    --surface-active:   #1f2c42;

    --text-strong:   #f2f5f9;
    --text-default:  #dde3ec;
    --text-muted:    #93a1b3;
    --text-subtle:   #6c7b8f;
    --text-link:     var(--pm-orange-400);
    --text-link-hover: var(--pm-orange-500);

    --border-subtle: #1d2839;
    --border-default: #2b394f;
    --border-strong: #405269;
    --border-focus:  var(--pm-orange-500);

    --success-100: rgba(23, 148, 94, .16);
    --warning-100: rgba(192, 122, 9, .18);
    --danger-100:  rgba(198, 42, 50, .18);
    --info-100:    rgba(255, 87, 51, .16);
    --success-600: #4ecf95;
    --warning-600: #ecb44c;
    --danger-600:  #ff7a7a;
    --info-600:    var(--pm-orange-400);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
}

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