/* ============================================================
   ATL PIM Suite Design Gallery - semantic tokens (LIGHT ONLY).

   Names and values follow WSP.PCT.PIMSuite.UX/Client/styles/tokens/_semantic-light.scss
   (resolved from the primitives). Only light values live here: there is no dark
   theme, no prefers-color-scheme block, and no theme toggle anywhere in this app.

   One deliberate gallery deviation: --pim-brand* is the blue of the ATLNext Home
   mockup (Figma file hZbCPOHa9IREnP8AR02nY8) rather than the production purple
   ramp (#8155B9), so the gallery reads like the supplied screens.
   Components consume these tokens; raw hex does not appear in component CSS.
   ============================================================ */
:root {
    color-scheme: light only;

    /* Surfaces (the SAVI inversion: dim canvas, white surfaces) */
    --pim-canvas: #fafafa;
    --pim-surface: #ffffff;
    --pim-surface-alt: #fafafa;
    --pim-panel-raised: #f8f8f8;

    /* Ink */
    --pim-ink: #1f1f1f;
    --pim-ink-subtle: #636363;
    --pim-ink-faint: #949494;

    /* Borders */
    --pim-border-hairline: #d1d1d1;
    --pim-border: #8f8f8f;
    --pim-border-strong: #6e6e6e;
    --pim-border-card: rgba(36, 36, 36, 0.17);

    /* Brand (gallery: mockup blue) */
    --pim-brand: #006feb;
    --pim-brand-hover: #0062cf;
    --pim-brand-active: #0057b7;
    --pim-brand-subtle: #e6f0fd;
    --pim-brand-border: #bcd9fb;
    --pim-on-brand: #ffffff;

    /* Interaction washes */
    --pim-hover: #f2f2f2;
    --pim-selected: #ebebeb;
    --pim-pressed: #dbdbdb;

    /* Chips and keycaps */
    --pim-chip-bg: #f2f2f2;
    --pim-chip-outline: #8f8f8f;
    --pim-keycap-bg: #f2f2f2;
    --pim-keycap-outline: #8f8f8f;

    /* Focus */
    --pim-focus-ring: #006feb;
    --pim-focus-ring-width: 2px;
    --pim-focus-ring-offset: 2px;

    /* Status pairs */
    --pim-warning-text: #d97706;
    --pim-warning-chip-bg: #fff9f5;
    --pim-error-text: #c50f1f;
    --pim-error-fill: #c50f1f;
    --pim-error-on-fill: #ffffff;
    --pim-error-chip-bg: #fdf3f4;
    --pim-error-chip-text: #b10e1c;
    --pim-success-text: #15803d;
    --pim-success-fill: #10b981;
    --pim-success-chip-bg: #f1faf1;
    --pim-success-chip-text: #15803d;
    --pim-info-text: #1e40af;
    --pim-info-fill: #0078d4;
    --pim-info-chip-bg: #f6fafe;
    --pim-info-chip-text: #1e40af;
    --pim-ai-accent: var(--pim-info-fill);

    /* Elevation */
    --pim-elev-1: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --pim-elev-pane: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    --pim-elev-tile-hover: 0 2px 8px rgba(0, 0, 0, 0.12);

    /* ---- Kit values from the ATL Home Figma frames (16079:4116, 16080:9379) that had
       no existing token. Names keep the --pim-* style; the comment names the kit variable. ---- */
    --pim-ink-kit: #242424;                         /* kendo-color-on-app-surface / on-base */
    --pim-border-control: rgba(36, 36, 36, 0.26);   /* kendo-color/opacity/button-border-normal */
    --pim-selected-wash: rgba(36, 36, 36, 0.08);    /* nav rail item, selected */
    --pim-chip-neutral-bg: rgba(36, 36, 36, 0.05);  /* icon-item, neutral (folder) */
    --pim-brand-wash: #f0f7ff;                      /* client-brand/light/1 (icon-item, document) */
    --pim-success-dot: #107c10;                     /* status bar online dot */
    --pim-elev-4: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12); /* Elevation/--kendo-elevation-4 */

    /* Spacing (kendo-spacing-*) */
    --pim-space-0-5: 2px;
    --pim-space-1: 4px;
    --pim-space-1-5: 6px;
    --pim-space-2: 8px;
    --pim-space-2-5: 10px;
    --pim-space-3: 12px;
    --pim-space-4: 16px;
    --pim-space-6: 24px;
    --pim-space-12: 48px;

    /* Type scale (kendo-font-size-*) and the Home display size */
    --pim-font-size-xs: 10px;
    --pim-font-size-sm: 12px;
    --pim-font-size-md: 14px;
    --pim-font-size-lg: 16px;
    --pim-font-size-xl: 20px;
    --pim-font-size-display: 36px;
    --pim-letter-spacing-tight: -0.5px;             /* kendo-letter-spacing-tight */
    --pim-line-height-sm: 1.33;
    --pim-line-height-md: 1.42;
    --pim-line-height-lg: 1.25;
    --pim-line-height-xl: 1.3;
    --pim-font-weight-light: 300;
    --pim-font-weight-normal: 400;
    --pim-font-weight-medium: 500;
    --pim-font-weight-semibold: 600;

    /* Icon box: Material Symbols Sharp, 20px glyph centered in a 16px box (kit MaterialSymbol Default),
       16px glyph in a 16px box (kit MaterialSymbol sm). */
    --pim-icon-box: 16px;
    --pim-icon-glyph: 20px;
    --pim-icon-glyph-sm: 16px;
    --pim-control-h: 32px;

    /* Gallery layout metrics (shell zones), measured on the Figma frame */
    --pim-appbar-h: 49px;
    --pim-appbar-actions-w: 495px;
    --pim-rail-w: 56px;
    --pim-pagebar-h: 64px;
    --pim-statusbar-h: 32px;
    --pim-home-col-w: 860px;
    --pim-radius-sm: 2px;
    --pim-radius-md: 4px;
    --pim-radius-lg: 8px;
    --pim-radius-pill: 9999px;

    /* Type */
    --pim-font: "Roboto Flex", "Segoe UI", system-ui, -apple-system, sans-serif;
    --pim-font-mono: "Cascadia Code", ui-monospace, Consolas, monospace;

    /* Bridge into the Telerik Fluent theme so stock components agree with the tokens. */
    --kendo-font-family: var(--pim-font);
    --kendo-color-primary: var(--pim-brand);
    --kendo-color-primary-hover: var(--pim-brand-hover);
    --kendo-color-primary-active: var(--pim-brand-active);
    --kendo-color-app-surface: var(--pim-canvas);
    --kendo-color-surface: var(--pim-surface);
    --kendo-color-on-app-surface: var(--pim-ink);
}