/* html/Pochemuchka/design/front/default/css/00-tokens.css
 *
 * Design tokens for the storefront. Raw hex may appear ONLY in this file; a
 * stylelint rule enforces that.
 *
 * The "00-" prefix is load-bearing. Both CSS loaders (CssLinkBuilder, used by
 * classes_and_functions/view_classes/CSS.php and composer/src/View/LazyLayoutDataGlobal.php)
 * build their <link> tags from an alphabetical scandir() of this directory, so the
 * prefix is what guarantees these declarations precede every consumer. Renaming the
 * file silently breaks the cascade.
 *
 * Single tier on purpose. An earlier version had a private raw palette
 * (--gray-500) behind these roles, but it was 23 entries feeding 26 roles — 20 of
 * them one-to-one — so it was indirection without consolidation. The roles now hold
 * their literals directly; where two roles genuinely share a colour, one references
 * the other so the relationship stays visible.
 *
 * Trailing comments record which original values each token absorbed. Colours were
 * merged by measured CIE ΔE2000 distance and dimensions normalised onto a scale, so
 * this provenance is the audit trail for changes that were deliberate.
 *
 * ΔE2000 measures perceptual SIMILARITY, not READABILITY — two colours can be ΔE ≤ 1
 * apart and sit on opposite sides of a legibility threshold. `frontend`'s
 * `pnpm check-contrast` therefore scores every foreground/background pair used in the
 * consuming CSS with APCA and fails below Lc 60. Saturated brand colours are marked
 * "fills and borders only" and have a separate `-text` token for use as a foreground;
 * do not use a fill token as text to save a token.
 */

:root {
    /* ==========================================================================
       COLOUR ROLES
       ========================================================================== */
    /* Backgrounds */
    --color-surface: #ffffff; /* replaces #ffffff, #fff */
    --color-surface-muted: #eeeeee; /* replaces #eeeeee, #eee, #f1f1f1, #f5f5f5 */
    --color-surface-highlight: #f9ebb9; /* replaces #f9ebb9, #fffd8b, #fde2b8 */
    --color-surface-info: #d8f1fa; /* replaces #d8f1fa, #f0f8ff */
    --color-surface-hover: #9adef3; /* replaces #9adef3, #99ccff */
    --color-surface-success: #d4edda; /* replaces #d4edda, #c3e6cb */

    /* Text */
    --color-text: #222222; /* replaces #222222, #333333, #444444 */
    --color-text-muted: #666666; /* replaces #666666, #777777, #595959, #555555 */
    --color-text-subtle: #6e6e6e; /* lightest grey that stays readable as text */
    --color-text-strong: #000000; /* replaces #000000, #000 */
    --color-text-inverse: var(--color-surface);
    --color-heading-sub: #dc6700; /* sub-headings (h2-h6); hue sits redder than the amber fill so it keeps full chroma while staying readable */
    --color-heading-main: #0056b3; /* main heading (h1, and the title of an item card). Holds its own value: it happens to match --color-link today, but an h1 is not a link and must not restyle when the link colour changes */

    /* Borders */
    --color-border: #cccccc; /* replaces #cccccc, #ccc */
    --color-border-muted: #e0e0e0; /* replaces #e0e0e0 */
    --color-border-strong: #aaaaaa; /* replaces #aaaaaa */
    --color-border-subtle: var(--color-surface-muted);
    --color-border-success: var(--color-surface-success);
    --color-shadow: #999999; /* holds its own value: a shadow is not text and must not track --color-text-subtle */

    /* Links & actions */
    --color-link: #0056b3; /* replaces #0056b3, #0055a5, #226297 */
    --color-link-hover: #2c7fc3; /* replaces #2c7fc3, #2d7bbb */
    --color-primary: var(--color-link);
    --color-primary-hover: #004280; /* replaces #004280 */
    --color-accent: #9ace2d; /* replaces #9ace2d, #9ccf30, #99cc66, #66cc33 — fills and borders only, Lc 35 as text */
    --color-accent-warm: #ffab00; /* replaces #ffab00, #f8ab46 — fills and borders only, Lc 36 as text */
    --color-accent-text: #709a00; /* brand green for text: darkest that stays green, not olive */

    /* Status */
    --color-danger: #b91416; /* replaces #b91416 */
    --color-danger-strong: #ff0000; /* replaces #ff0000 */
    --color-success: #155724; /* replaces #155724 */
    --color-info: #40abd9; /* replaces #40abd9 */

    /* ==========================================================================
       SPACING SCALE (rem-based, 1rem = 16px)
       ========================================================================== */
    --space-3xs: 0.1875rem; /* 3px — absorbs 2px, 4px */
    --space-2xs: 0.3125rem; /* 5px */
    --space-xs: 0.375rem; /* 6px — absorbs 7px */
    --space-sm: 0.625rem; /* 10px — absorbs 8px, 9px */
    --space-md: 0.9375rem; /* 15px — absorbs 13px, 16px */
    --space-lg: 1.25rem; /* 20px — absorbs 21px, 24px */
    --space-xl: 1.875rem; /* 30px — absorbs 27px, 28px, 35px */
    --space-2xl: 3.125rem; /* 50px — absorbs 52px, 57px */
    /* Note: 102px is a one-off and will not be tokenised */

    /* ==========================================================================
       TYPOGRAPHY SCALE (rem-based, 1rem = 16px)
       ========================================================================== */
    --text-xs: 0.75rem; /* 12px — absorbs 13px */
    --text-sm: 0.875rem; /* 14px — absorbs 15px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px — absorbs 19px */
    --text-xl: 1.5rem; /* 24px */
    --text-2xl: 2.5rem; /* 40px */

    /* ==========================================================================
       FONT STACKS
       ========================================================================== */
    --font-family-base: 'Noto Sans', Arial, Helvetica, sans-serif; /* replaces 'Noto Sans', sans-serif and Arial, Helvetica, Sans-Serif */

    /* ==========================================================================
       RADII
       ========================================================================== */
    --radius-sm: 0.25rem; /* 4px — absorbs 3px, 5px */
    --radius-md: 0.5rem; /* 8px — absorbs 10px */
    --radius-lg: 0.75rem; /* 12px — absorbs 13px */

    /* ==========================================================================
       CONTROL SIZING

       The tier that was missing. Without it every button derived its height by
       accident from font-size + padding, landing on six different values, and
       anything that needed to be taller patched around it with a magic
       `height: 25px`. Heights are min-heights so a control still grows with its
       content rather than clipping a wrapped or translated label.
       ========================================================================== */
    --control-height-sm: 1.5rem; /* 24px — dense contexts (table-row actions) */
    --control-height-md: 2rem; /* 32px — default: buttons, selects, text inputs */
    --control-height-lg: 2.5rem; /* 40px — primary calls to action */
    --control-padding-x: var(--space-sm); /* 10px */

    /* Floor for anything clickable, asserted by the tap-target e2e test.
       24px is the WCAG 2.2 SC 2.5.8 minimum; controls should normally use
       --control-height-md and only fall back to this in dense layouts. */
    --tap-target-min: 1.5rem; /* 24px */

    /* ==========================================================================
       LAYOUT
       ========================================================================== */
    --max-content-width: 1200px; /* existing token from index.css */
    --gap: 1em;                  /* existing token from layout.css */
}