/* Copied from laracart-platform/resources/css/design-tokens.css — the Store Admin's design system. Keep in step with that file. */
/*
 * Design tokens — one source of truth for the platform's visual language.
 *
 * This file declares custom properties and nothing else: no selectors beyond
 * :root, no element styling, no side effects. Every layout links it ahead of its
 * own stylesheet, so a screen can override anything by source order and never
 * needs !important.
 *
 * STATE OF THE MIGRATION
 * These values are the new design system, taken from the approved mock-ups. The
 * sign-in screen is the first surface built on them. The other module
 * stylesheets still carry the previous lime palette as their own literals and
 * are converted screen by screen as each mock-up lands, so until that finishes
 * the admin is deliberately two-toned. Nothing here is consumed by a screen that
 * has not been converted, which is what makes changing a value below safe.
 *
 * COLOUR SPACE
 * The palette is authored in oklch because the mock-ups are: lightness is
 * perceptual there, so a ramp built by moving one number stays evenly spaced,
 * which hex cannot promise. Hue 155 carries the brand green and 150 the
 * neutrals, and holding those two constant is what keeps the greys reading as
 * part of the green family rather than as a separate grey.
 *
 * Status colours are still the previous hex values: no mock-up has defined an
 * error or success state yet, and inventing one would be guessing at a decision
 * that has not been made.
 */

:root {
    /* ---------------------------------------------------------------
     * Brand — the green. Reserved for identity, focus and links, so it
     * stays legible as "this is live" rather than as decoration.
     * --------------------------------------------------------------- */
    --brand: oklch(0.68 0.15 155);              /* mark, markers, accents */
    --brand-on-dark: oklch(0.78 0.13 155);      /* brand text on the dark panel */
    --warning-on-dark: oklch(0.78 0.12 80);     /* an unmet requirement on the dark panel */
    --brand-focus: oklch(0.6 0.13 155);         /* focus borders, brand text on light */
    --brand-link: oklch(0.55 0.13 155);
    --brand-link-hover: oklch(0.44 0.13 155);
    --brand-border: oklch(0.9 0.02 155);        /* resting border of brand-toned cards */
    --brand-border-hover: oklch(0.72 0.05 155);
    --brand-wash: oklch(0.95 0.02 155);         /* pressed/hover tint */
    --brand-wash-soft: oklch(0.985 0.012 155);  /* the faintest usable tint */
    --brand-deep: oklch(0.4 0.1 155);           /* brand-family text on a wash */
    --brand-mark-ground: oklch(0.28 0.03 155);  /* the graphite disc of the T mark */

    /* ---------------------------------------------------------------
     * Action — the primary button. Deep green rather than the accent:
     * the accent is for wayfinding, and a page with one filled control
     * should not have to compete with it.
     * --------------------------------------------------------------- */
    --action: oklch(0.28 0.03 155);
    --action-hover: oklch(0.22 0.025 155);
    --action-active: oklch(0.18 0.02 155);
    --action-on: #ffffff;

    /* ---------------------------------------------------------------
     * Chrome — dark ground: the sign-in brand panel, and the admin
     * sidebar once it is converted.
     * --------------------------------------------------------------- */
    --chrome: oklch(0.24 0.025 155);
    --chrome-on: #ffffff;
    --chrome-text: oklch(0.82 0.02 150);        /* body copy on the dark ground */
    --chrome-text-strong: oklch(0.85 0.02 150);
    --chrome-text-dim: oklch(0.74 0.02 150);    /* nested navigation rows */
    --chrome-text-muted: oklch(0.72 0.02 150);  /* mono metadata on the dark ground */
    --chrome-icon: oklch(0.52 0.02 150);        /* chevrons, bullets, subgroup labels */
    --chrome-hover: oklch(0.3 0.03 155);
    --chrome-active: oklch(0.34 0.05 155);      /* the current page in the sidebar */
    --chrome-raised: oklch(0.3 0.035 155);      /* panels sitting on the dark ground */
    --chrome-border: oklch(0.36 0.03 155);
    --chrome-guide: oklch(0.34 0.02 155);       /* the rule that ties a child list to its parent */

    /* ---------------------------------------------------------------
     * Hero ground — the public site's dark-green stage (the 1200×630
     * preview, the landing hero, the closing band and the footer):
     * a faint square grid and one soft brand glow. Text on it is AA.
     * --------------------------------------------------------------- */
    --hero-ground: oklch(0.24 0.025 155);       /* = --chrome */
    --hero-ground-deep: oklch(0.205 0.022 155); /* footer, under the closing band */
    --hero-grid-line: oklch(1 0 0 / 0.045);
    --hero-grid-size: 40px;
    --hero-glow: oklch(0.68 0.15 155 / 0.32);
    --hero-text: oklch(0.88 0.03 155);          /* lead copy, 10:1 on the ground */
    --hero-text-muted: oklch(0.78 0.02 150);    /* fine print, 7:1 */
    --hero-accent: oklch(0.8 0.13 155);         /* «.shop», figures, links on the ground */
    --hero-line: oklch(1 0 0 / 0.18);           /* outlined chips and ghost buttons */
    --hero-line-soft: oklch(1 0 0 / 0.1);       /* rules between dark panels */
    --hero-panel: oklch(1 0 0 / 0.04);          /* a card sitting on the ground */
    --hero-panel-hover: oklch(1 0 0 / 0.08);
    --hero-cta: oklch(0.8 0.13 155);            /* primary button on the ground (dark text, 8:1) */
    --hero-cta-hover: oklch(0.86 0.11 155);
    --hero-cta-on: oklch(0.2 0.025 155);
    --shadow-float: 0 30px 60px oklch(0 0 0 / 0.35);
    --radius-panel: 12px;                       /* large illustrative cards only, never a label */
    --header-height: 68px;

    /* ---------------------------------------------------------------
     * Neutrals — hue 150, so the greys belong to the green family.
     * --------------------------------------------------------------- */
    --page: oklch(0.98 0.006 150);
    --surface: #ffffff;
    --surface-input: oklch(0.99 0.003 150);     /* inputs sit just below the card */
    --surface-raised: oklch(0.975 0.005 150);   /* table headers, quiet fills, media wells */

    --surface-hover: oklch(0.95 0.008 155);     /* quiet hover on a light ground */

    --text: oklch(0.24 0.02 150);
    --text-label: oklch(0.34 0.02 150);
    --text-tab: oklch(0.42 0.02 150);           /* resting tabs and list labels */
    --text-soft: oklch(0.48 0.02 150);
    --text-muted: oklch(0.5 0.02 150);
    --text-faint: oklch(0.72 0.01 150);         /* uppercase dividers, empty values */
    --text-placeholder: oklch(0.68 0.01 150);

    --line-strong: oklch(0.82 0.01 150);        /* an unchosen radio or checkbox edge */
    --line: oklch(0.9 0.008 150);               /* control borders */
    --switch-off: oklch(0.87 0.008 150);        /* a switch that is not on */
    --line-soft: oklch(0.91 0.008 150);         /* button borders */
    --line-card: oklch(0.92 0.008 150);         /* card borders */
    --line-hairline: oklch(0.94 0.006 150);     /* rules inside a surface */

    /* ---------------------------------------------------------------
     * Status — previous palette, awaiting mock-ups. See the note above.
     * --------------------------------------------------------------- */
    --success: #246b32;
    --success-bg: #e7f6e8;
    --success-border: #cbd8a8;

    --danger: #b42318;
    --danger-bg: #fff0ee;
    --danger-border: #efc0ba;

    --warning: #8b5b00;
    --warning-bg: #fff8df;
    --warning-border: #e9d9a3;

    /* The fourth reading the status family was missing: work in progress. Neither a warning
       nor a success, it is the blue the mock-ups use for a checkout still running and for a
       request that has been received but not yet answered. */
    --info: oklch(0.4 0.1 250);
    --info-bg: oklch(0.93 0.02 250);
    --info-border: oklch(0.85 0.04 250);

    /* Identity tints — for marks that stand for a person or a label rather than for a state.
       An avatar wash must vary so a list of faces is scannable, which is the one place the
       interface needs colour that means nothing in particular. Violet has no state attached
       to it anywhere in the system, which is exactly why it can be borrowed here. */
    --tint-violet: oklch(0.4 0.09 300);
    --tint-violet-bg: oklch(0.95 0.02 300);
    --tint-violet-border: oklch(0.87 0.04 300);

    /* ---------------------------------------------------------------
     * Typography — Manrope carries the interface; IBM Plex Mono is
     * reserved for values that benefit from aligned figures and for small
     * uppercase labels. Commerce data is numeric, which is what earns the
     * second family: store ids, prices and quantities line up when scanned.
     * --------------------------------------------------------------- */
    --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 21px;
    --text-2xl: 27px;
    --text-3xl: 34px;

    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.55;

    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    /* Display sizes are set tight; small caps labels are set open. */
    --tracking-display: -0.04em;
    --tracking-tight: -0.03em;
    --tracking-snug: -0.01em;
    --tracking-normal: 0.01em;
    --tracking-mono: 0.04em;
    --tracking-caps: 0.14em;

    /* ---------------------------------------------------------------
     * Space — a 4px grid.
     * --------------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-12: 48px;
    --space-14: 56px;

    /* ---------------------------------------------------------------
     * Radius — crisp. 3px on controls and 4px on cards is the system's
     * signature: enough to read as a surface, tight enough that dense
     * operational screens do not look inflated.
     * --------------------------------------------------------------- */
    --radius-sm: 3px;
    --radius: 4px;
    --radius-lg: 6px;
    /* A circle, and only a circle: 50% of a box that is wider than it is tall is an ellipse. Use it
       solely on a box with a fixed width equal to its height that carries no text — a radio dot,
       a switch knob, an avatar, a swatch, a spinner, a status dot. Steps, tabs, chips, badges,
       counters and labels are rectangles with --radius-sm. There is no pill radius. */
    --radius-circle: 50%;

    /* ---------------------------------------------------------------
     * Elevation — depth is carried by borders; shadow is reserved for
     * what genuinely floats.
     * --------------------------------------------------------------- */
    --shadow-card: 0 1px 2px oklch(0.24 0.02 150 / 0.04), 0 12px 32px oklch(0.24 0.02 150 / 0.05);
    --shadow-md: 0 8px 28px oklch(0.24 0.02 150 / 0.1);

    /* ---------------------------------------------------------------
     * Controls — the 44px minimum is the pointer target the accessibility
     * suites assert on, and it is a floor rather than the resting height.
     * --------------------------------------------------------------- */
    /* The width a screen is drawn to. Every page and every bar that sits above one reads this,
       so a heading in a sticky bar always lines up with the card beneath it. A screen that wants
       to be narrower sets it on its own surface rather than hard-coding a second number. */
    --page-measure: 1240px;

    --control-height: 44px;
    --control-padding-y: 13px;
    --control-padding-x: 14px;

    /* Focus — one visible treatment everywhere. */
    --focus-ring: 3px solid var(--brand-focus);
    --focus-offset: 2px;

    /* Motion — short and functional; longer reads as lag in a tool people
     * use for hours. */
    --transition-fast: 120ms ease;
    --transition: 150ms ease;

    /* Layering — declared centrally so a new overlay need not guess. */
    --z-backdrop: 35;
    --z-sidebar: 40;
    --z-topbar: 30;
    --z-dialog: 50;
    --z-skip-link: 100;
}