////
///
/// Color Tokens
/// ===========================================================================
///
/// Semantic `--ss-color-*` design tokens emitted at `:root` for the
/// default (light) theme. Dark theme overrides live in
/// `33-overrides/_dark.scss`.
///
/// Values are aligned to the historical StyleScape identity: a desaturated
/// steel-blue accent family (`hue.gl` N24xx) with blue / purple / mauve
/// feedback colors, rather than a generic green / amber / red set. The
/// `--ss-color-*` token *names* and structure are unchanged — only the
/// resolved values differ — so every component keeps the new format while
/// rendering in the old palette.
///
/// Tints (`-bg`, `-soft`, `-foreground`) are derived from the base hue via
/// `color.mix()` so the whole family stays in gamut with the accent.
///
/// Emitted for `:root` and for `[data-theme="light"]`, so a light island
/// inside a dark page re-declares the light values on itself. Emitted inside
/// `@layer ss.lexicon`: unlayered declarations beat every layer, which
/// would stop the `ss.overrides` dark theme from ever applying.
///
/// @group Lexicon
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

@use "sass:color";
@use "../01-core/external" as *;
@use "../01-core/functions" as fn;

// ----------------------------------------------------------------------------
// Base hues (old StyleScape / hue.gl identity)
// Leading `_` keeps these private so they are not re-exported by `@forward`.
// ----------------------------------------------------------------------------

$_accent: hue_color("N2405"); // #3696c1 steel blue  (= state_active)
$_accent-dark: hue_color("N2407"); // #346a85 deep teal-blue (accent_secondary)
$_accent-light: hue_color("N2403"); // #8abedc light sky (accent_tertiary)
$_state-link: hue_color("N2404"); // #65aace (= state_link / state_focus)
$_state-hover: hue_color("N2402"); // #acd2e9 (state_hover)
$_visited: hue_color("N2704"); // #87a2d6 (state_visited)

// Status hues come from the same hue.gl chroma band as the accent, so they
// stay muted, but they differ in hue: success/info used to be two near-equal
// blues (N2555/N2705) and warning/error two pastel purples (N3005/N3305).
$_success: hue_color("N1505"); // #559a6a green
$_warning: hue_color("N0605"); // #b57f55 amber
$_error: hue_color("N0305"); // #c4756e red
$_info: hue_color("N2705"); // #6a8dca indigo-blue

// Tint helpers ---------------------------------------------------------------
@function _bg($c) {
    @return color.mix(#ffffff, $c, 88%);
} // pale fill
@function _soft($c) {
    @return color.mix(#ffffff, $c, 94%);
} // faintest fill
@function _fg($c) {
    @return color.mix(#111111, $c, 62%);
} // readable dark tint
@function _ink($c) {
    @return fn.ensure-contrast($c, #ececec, 4.5);
} // same hue, darkened to WCAG AA on white and the light gray surfaces
// (down to `--ss-color-surface-1`)
// (as text, or under white text)

@layer ss.lexicon {
    :root,
    [data-theme="light"] {
        // ========================================================================
        // Neutrals
        // ========================================================================

        --ss-color-white: #ffffff;
        --ss-color-black: #000000;

        // Neutral gray ramp for consumers that need stepped grays beyond the
        // semantic surface/border/text roles (dashboards, admin chrome, …).
        --ss-color-gray-50: #fafafa;
        --ss-color-gray-100: #f0f0f0;
        --ss-color-gray-200: #e0e0e0;
        --ss-color-gray-300: #b3b3b3;
        --ss-color-gray-400: #888888;
        --ss-color-gray-500: #666666;
        --ss-color-gray-600: #4a4a4a;
        --ss-color-gray-700: #333333;
        --ss-color-gray-800: #1a1a1a;
        --ss-color-gray-900: #111111;

        // ========================================================================
        // Surface / Background
        // ========================================================================

        --ss-color-background: #ffffff;
        --ss-color-foreground: #000000;

        --ss-color-surface: #ffffff;
        --ss-color-surface-alt: #fafafa;
        --ss-color-surface-muted: #f5f5f5;
        --ss-color-surface-hover: #f0f0f0;
        --ss-color-surface-primary: #ffffff;

        // Stepped neutral surfaces (avatar chips, stack demos, progress tracks…).
        // Several modules reference these; without definitions they collapsed to
        // white-on-white.
        --ss-color-surface-1: #ececec;
        --ss-color-surface-2: #dedede;
        --ss-color-surface-3: #cfcfcf;

        --ss-color-fill: #ffffff;
        --ss-color-fill-muted: #f5f5f5;

        // ========================================================================
        // Text
        // ========================================================================

        --ss-color-text: #000000;
        --ss-color-text-primary: #000000;
        --ss-color-text-default: var(--ss-color-text-primary);
        --ss-color-text-muted: #414141;
        --ss-color-text-secondary: var(--ss-color-text-muted);
        --ss-color-muted: #707070;
        --ss-color-muted-foreground: #414141;

        // ========================================================================
        // Lines / Borders
        // ========================================================================

        // line = standard divider, line-secondary = thin/quiet divider.
        --ss-color-line: #cccccc;
        --ss-color-line-primary: #000000;
        --ss-color-line-secondary: #e5e5e5;

        --ss-color-border: #cccccc;
        --ss-color-border-muted: #e5e5e5;
        --ss-color-border-subtle: #ededed;
        // Boundaries of form controls: ≥ 3:1 against the surface (WCAG 1.4.11).
        --ss-color-border-strong: #8a8a8a;

        // ========================================================================
        // Brand / Accent
        // ========================================================================

        --ss-color-primary: #000000;
        --ss-color-secondary: #414141;

        --ss-color-accent: #{_ink($_accent)};
        --ss-color-accent-bg: #{_bg($_accent)};
        --ss-color-accent-foreground: #ffffff;
        --ss-color-accent-highlight: #{$_accent-dark};
        --ss-color-accent-tertiary: #{$_accent-light};

        --ss-color-highlight: #{_bg($_accent)};
        --ss-color-highlight-foreground: #{_fg($_accent)};

        // ========================================================================
        // Links
        // ========================================================================

        // Link colors follow the old `_color_system` state roles exactly:
        // link = state_link (N2404), hover = state_hover (N2402),
        // active = state_active (N2405), visited = state_visited (N2704).
        // Darkened via `_ink()` so link text meets WCAG AA on white; hover goes
        // deeper rather than paler for the same reason.
        --ss-color-link: #{_ink($_state-link)};
        --ss-color-link-hover: #{$_accent-dark};
        --ss-color-link-active: #{_ink($_accent)};
        --ss-color-link-visited: #{_ink($_visited)};

        // ========================================================================
        // States
        // ========================================================================

        // state_focus == state_link == N2404 in the old system.
        --ss-color-focus: #{_ink($_state-link)};

        // Focus ring (outline/box-shadow based focus indicators).
        --ss-focus-ring-color: var(--ss-color-focus);
        --ss-focus-ring-width: #{q(2)};
        --ss-focus-ring-offset: #{q(2)};

        // Overlay behind modals / offcanvas panels.
        --ss-color-backdrop: rgb(0 0 0 / 0.5);

        // These are consumed as real colors (hyperlink hover/active text, legacy
        // compat backgrounds), so they carry the old state_* hues rather than a
        // neutral overlay — otherwise link hover text renders near-invisible.
        --ss-color-state-hover: #{$_accent-dark};
        --ss-color-state-active: #{_ink($_accent)};
        --ss-color-state-link: #{_ink($_state-link)};

        // ========================================================================
        // Status / Feedback
        // ========================================================================

        --ss-color-success: #{_ink($_success)};
        --ss-color-success-bg: #{_bg($_success)};
        --ss-color-success-soft: #{_soft($_success)};
        --ss-color-success-foreground: #{_fg($_success)};
        --ss-color-on-success: #ffffff;

        --ss-color-warning: #{_ink($_warning)};
        --ss-color-warning-bg: #{_bg($_warning)};
        --ss-color-warning-soft: #{_soft($_warning)};
        --ss-color-warning-foreground: #{_fg($_warning)};
        --ss-color-on-warning: #ffffff;

        --ss-color-error: #{_ink($_error)};
        --ss-color-error-bg: #{_bg($_error)};
        --ss-color-error-soft: #{_soft($_error)};
        --ss-color-error-foreground: #{_fg($_error)};
        --ss-color-on-error: #ffffff;

        --ss-color-info: #{_ink($_info)};
        --ss-color-info-bg: #{_bg($_info)};
        --ss-color-info-soft: #{_soft($_info)};
        --ss-color-info-foreground: #{_fg($_info)};
        --ss-color-on-info: #ffffff;

        --ss-color-on-accent: #ffffff;

        // ========================================================================
        // Code / Keyboard
        // ========================================================================

        --ss-color-code-bg: #1e1e1e;
        --ss-color-code-background: #1e1e1e;
        --ss-color-code-foreground: #f4f4f4;
        --ss-color-kbd-bg: #f5f5f5;
    }
}