/*
 * TIER 1 - primitives.
 *
 * The raw scale. Brand-agnostic and named off the hue, so that a brand whose
 * primary is teal or cyan is still expressible. Components must NEVER reference
 * anything in this file; they reference Tier 2 semantic tokens, which alias these.
 * See docs/frontend/design-tokens.md.
 *
 * Values come from "Ginger Design System/colors_and_type.css". Where ginger-admin
 * and the Design System disagree, the Design System wins on values - so a handful
 * of Admin's near-duplicate shades collapse onto the nearest Design System step.
 * Each collapse is noted inline. That is the point of this layer: Admin carries 49
 * distinct colour literals, several of them the same colour spelled differently.
 *
 * The only additions to the Design System's palette are the four marked ADMIN-ONLY,
 * which serve a role the Design System has no value for.
 */

:root {
    /* ---------------------------------------------------------------- colour */

    /*
     * Green ramp. The Ginger brand hue, and only one of four possible primaries -
     * nopayn is forest, mytu is teal, griner is cyan. Tier 2 maps the primary role
     * onto this ramp; Tier 3 replaces it per brand.
     */
    --g-green-100: #f5fcf8; /* Admin's #EFFCF4 collapses here */
    --g-green-200: #e9fbf0;
    --g-green-300: #d3f7e0; /* Admin's #D7F8E4 collapses here */
    --g-green-400: #b7e7c6;
    --g-green-500: #0ade63; /* primary, default */
    --g-green-600: #00d158; /* primary, hover. 4.5:1 on white, unlike -500 */
    --g-green-650: #00ca55; /* Admin's #00C954 collapses here */
    --g-green-700: #10c342;
    --g-green-800: #1ea947; /* Admin's #18B744 collapses here */
    --g-green-900: #18b72c;

    /* Cool neutral ramp, strongest to subtlest. Text, icons, dividers. */
    --g-slate-900: #121212;
    --g-slate-800: #232e3b; /* Admin's #242E3B collapses here */
    --g-slate-600: #5d6b7a;
    --g-slate-500: #647282;
    --g-slate-400: #838e9b;
    --g-slate-300: #acb2c0;
    --g-slate-200: #c7ced7;

    /* Surfaces. */
    --g-white: #ffffff;
    --g-grey-50: #f9fafc; /* Admin's #F6F8FA collapses here */
    --g-grey-75: #fbfbfb;
    --g-grey-100: #eff1f5;
    --g-grey-150: #e9ecf1; /* ADMIN-ONLY: ghost button hover, input border */
    --g-warm-100: #f5f4f2;

    /* Borders. */
    --g-border-100: #eeeeee; /* Admin's #ECECEC collapses here */
    --g-border-150: #eff0f2;
    --g-border-200: #d4d4d4; /* Admin's #CCCCCC collapses here */
    --g-border-warm: #dad9d7;

    /*
     * Status hues. Named by hue here; Tier 2 is what binds them to a role, so a
     * brand whose "success" is not green stays expressible.
     */
    --g-success: #10c342;
    --g-success-tint: #00ca55; /* carries the -bg and -border alphas */
    --g-success-edge: #00d158;
    --g-info: #3f8cff;
    --g-info-solid: #2374ee;
    --g-warning: #fb8800;
    --g-warning-tint: #f7c344; /* carries the -bg and -border alphas */
    --g-danger: #ff4848;
    --g-danger-strong: #f43737; /* ADMIN-ONLY: destructive hover */
    --g-danger-tint: #fe6e6e; /* carries the -bg and -border alphas */

    /* ADMIN-ONLY: the yellow Ginger underlines links with. No Design System equivalent. */
    --g-yellow-300: #feee6e;

    /* ---------------------------------------------------------------- radius */

    --g-radius-xs: 3px;
    --g-radius-sm: 4px;
    --g-radius-md: 5px; /* dominant: buttons, inputs, badges */
    --g-radius-pill: 7px; /* documented in the DS radii page with no token */
    --g-radius-lg: 8px;
    --g-radius-xl: 12px;
    --g-radius-full: 9999px;

    /* --------------------------------------------------------------- spacing */

    /*
     * Named by pixel value, not by ordinal. The Design System's --sp-1..9 hides
     * that --sp-3 is 10px and --sp-5 is 15px, and the scale is not uniform, so the
     * ordinal carries no arithmetic meaning. Eight steps the Design System omits
     * but its own components use are included (2, 5, 6, 14, 16, 18, 28, 64).
     */
    --g-space-2: 2px;
    --g-space-4: 4px;
    --g-space-5: 5px;
    --g-space-6: 6px;
    --g-space-8: 8px;
    --g-space-10: 10px; /* most common: input and button padding */
    --g-space-12: 12px;
    --g-space-14: 14px;
    --g-space-15: 15px;
    --g-space-16: 16px;
    --g-space-18: 18px;
    --g-space-20: 20px;
    --g-space-24: 24px;
    --g-space-28: 28px;
    --g-space-32: 32px;
    --g-space-40: 40px;
    --g-space-64: 64px;

    /* ------------------------------------------------------------ typography */

    /*
     * The licensed faces come first in each stack and are self-hosted from
     * public/fonts/ (see resources/css/vendor/_fonts.css), so the Google Fonts
     * fallbacks behind them never load for Ginger. They stay in the stack for the
     * brands that do not license NB International Pro.
     */
    --g-family-sans:
        nb_international_pro, inter, system-ui, -apple-system, "Segoe UI", roboto, arial, sans-serif;
    --g-family-display: reckless, fraunces, "PT Serif", georgia, serif;
    --g-family-mono:
        nb_international_promono, "JetBrains Mono", ui-monospace, sfmono-regular, menlo, consolas,
        monospace;

    --g-font-size-10: 10px;
    --g-font-size-11: 11px;
    --g-font-size-12: 12px;
    --g-font-size-13: 13px; /* body default for this UI */
    --g-font-size-14: 14px;
    --g-font-size-16: 16px;
    --g-font-size-20: 20px;
    --g-font-size-24: 24px;
    --g-font-size-32: 32px; /* dashboard stat numbers; absent from the DS scale */
    --g-font-size-40: 40px;
    --g-font-size-96: 96px;

    --g-line-height-tight: 100%;
    --g-line-height-snug: 120%;
    --g-line-height-base: 140%;

    --g-font-weight-light: 300;
    --g-font-weight-regular: 400;
    --g-font-weight-medium: 500;
    --g-font-weight-bold: 700;

    --g-tracking-tight: -0.01em;
    --g-tracking-eyebrow: 0.06em; /* DS conflict resolved: components all use .06 */

    /* ------------------------------------------------------------- elevation */

    /* Four recipes, verified against Figma. Do not invent a fifth. */
    --g-shadow-card: 0 3px 10px rgba(0, 0, 0, 0.05);
    --g-shadow-dropdown: 0 5px 20px rgba(0, 0, 0, 0.05);
    --g-shadow-popover: 0 10px 50px rgba(0, 0, 0, 0.15);

    /* ---------------------------------------------------------------- motion */

    --g-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --g-duration-fast: 120ms;
    --g-duration-medium: 200ms;
    --g-duration-slow: 320ms;
}