/*
DJ Hammy Supersonic Archive
Public design tokens — v1.8.2

Compatibility-first correction:
- Existing v1.5 component styling remains authoritative.
- This file centralises design values without globally reassigning component roles.
- Change semantic tokens here first for future controlled palette work.
*/

:root {
    --palette-cream-50: #faf8f4;
    --palette-cream-100: #f4f1ec;
    --palette-white: #ffffff;

    --palette-ink-950: #101216;
    --palette-ink-900: #1b1e24;
    --palette-ink-700: #2e333d;

    --palette-grey-700: #69706d;
    --palette-grey-500: #9da4ad;
    --palette-grey-300: #ddd9d1;
    --palette-grey-200: #e5e8e5;
    --palette-grey-100: #f0ede7;

    --palette-orange-500: #ff7747;
    --palette-orange-600: #f26231;

    --palette-green-700: #225844;
    --palette-green-800: #174333;

    --color-bg: var(--palette-cream-100);
    --color-surface: var(--palette-white);
    --color-surface-subtle: var(--palette-cream-50);
    --color-text: #171918;
    --color-text-muted: var(--palette-grey-700);
    --color-border: var(--palette-grey-300);

    --color-brand: var(--palette-orange-500);
    --color-brand-hover: var(--palette-orange-600);

    --color-action: var(--palette-green-700);
    --color-action-hover: var(--palette-green-800);

    --color-dark: var(--palette-ink-950);
    --color-dark-field: var(--palette-ink-900);
    --color-dark-border: var(--palette-ink-700);
    --color-text-on-dark: #ffffff;
    --color-muted-on-dark: #aeb5b0;

    --color-secondary-action: var(--palette-grey-200);
    --color-secondary-action-hover: #eeeeee;
    --color-focus-action: rgba(36, 79, 63, .28);
    --color-focus-brand: rgba(255, 119, 71, .30);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --space-1: .25rem;  /* 4px */
    --space-2: .5rem;   /* 8px */
    --space-3: .75rem;  /* 12px */
    --space-4: 1rem;    /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem;  /* 24px */
    --space-7: 1.75rem; /* 28px */
    --space-8: 2rem;    /* 32px */
    --space-12: 3rem;   /* 48px */
    --space-16: 4rem;   /* 64px */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --shadow-card: 0 8px 20px rgba(16, 18, 22, .06);
    --shadow-soft: 0 10px 30px rgba(16, 18, 22, .06);
    --container-width: 1120px;

    /* compatibility aliases used by the stable v1.5 component CSS */
    --bg: var(--color-bg);
    --panel: var(--color-surface);
    --text: var(--color-text);
    --muted: var(--color-text-muted);
    --border: var(--color-border);

    --accent: var(--color-action);
    --accent-hover: var(--color-action-hover);
    --archive-green: var(--color-action);
    --hammy-orange: var(--color-brand);
    --hammy-orange-hover: var(--color-brand-hover);
    --ink: var(--color-dark);
    --ink-soft: var(--color-dark-field);
    --ink-border: var(--color-dark-border);
    --cream: var(--color-bg);
    --radius: var(--radius-default);
}


/* =========================================================
   v1.8.0 target token vocabulary
   Added as non-breaking foundations for the semantic migration.
   Components may continue using compatibility aliases until migrated.
   v1.8.1 aligns semantic tokens to the exact production values before CSS declarations are rewired.
   ========================================================= */

/* Additional semantic colour roles found during the literal-value audit. */
:root {
    --color-text-strong: #171918;
    --color-text-brand-ink: #111318;
    --color-surface-warm: #f4f1ec;
    --color-surface-highlight: #fbfaf7;
    --color-action-soft: #e4f2e9;
    --color-action-strong: #225844;
    --color-border-strong: #cbc5bc;
    --color-border-on-dark: #30353d;
    --color-text-subtle-on-dark: #bfc5c1;
    --color-warning-soft: #fff1c9;
    --color-dark-soft: #20242b;
    --color-dark-elevated: #1d2128;
    --color-brand-tint: rgba(255, 119, 71, .16);


    /* Production-fidelity semantic roles established during v1.8.1 migration. */

    --color-search-field: #1b2028;
    --color-search-border: #353b44;
    --color-text-on-show-hero-muted: #bbc0c8;
    --color-text-on-brand: #111111;
    --color-focus-action-strong: rgba(36, 79, 63, .25);
    --color-focus-brand-strong: rgba(255, 119, 71, .20);

    --color-control-border: #bfc5c1;
    --color-control-border-strong: #9da4ad;
    --color-success-soft: #dceee4;
    --color-warning: #fff0c9;
    --color-warning-alt: #fff1c9;
    --color-error-surface: #fff1f0;
    --color-error-border: #e5b7b2;
    --color-text-tertiary: #9a9e9b;
    --color-text-on-dark-secondary: #c9ceca;
    --color-text-on-dark-tertiary: #929994;
    --color-ranking-text: #202522;
    --color-ranking-value: #252b27;
    --color-surface-year: #faf9f6;
    --color-secondary-action-hover-soft: #dde1dd;

    --radius-default: 14px;


    /* Phase 2B — component-role geometry. */
    --control-height-large: 48px;
    --az-index-size: 34px;
    --ranking-row-min-height: 58px;

    /* Component-specific colour roles retained as semantic decisions. */
    --color-check-surface: #f5f6f4;
    --color-error-soft: #fde3e0;
    --color-tag-surface: #f7f8f6;
    --color-highlight-surface: #dfe9e3;
    --color-match-surface: #f5f7f5;
    --color-nav-muted-on-dark: #c8cbd1;
    --color-home-hero-glow: rgba(255,119,71,.13);
    --color-home-hero-warm: #18130f;
    --color-home-hero-deep: #101318;
    --color-home-hero-intro: #c5c8ce;
    --color-home-search-border: #454b55;
    --color-home-search-placeholder: #969ca6;
    --color-search-helper: #8f959f;
    --color-search-helper-link: #d8dbe0;
    --color-search-helper-link-hover: #626873;
    --color-home-shortcut-border-hover: #c6bfb5;
    --color-stream-badge-soft: #cde0d8;
    --color-divider-soft: #aaa59c;
    --color-card-hover-border: #aeb6b1;

    --shadow-card-hover: 0 8px 20px rgba(16,18,22,.045);
    --shadow-result-hover: 0 7px 18px rgba(17,20,25,.06);
    --shadow-feature-hover: 0 10px 24px rgba(17,20,25,.13);
    --shadow-panel-whisper: 0 1px 0 rgba(0,0,0,.015);
    --color-stats-brand-tint: rgba(255,112,72,.11);

    /* Additional type roles exposed by component analysis. */
    --type-size-eyebrow: .78rem;
    --type-size-compact-meta: .82rem;
    --type-size-navigation: .84rem;
    --type-size-secondary: .9rem;


    /* Phase 2B — remaining component surface/interaction colours. */
    --color-secondary-button-border: #e4e1da;
    --color-home-shortcut-border: #353a43;
    --color-home-shortcut-surface: rgba(255,255,255,.045);
    --color-home-shortcut-hover-border: #5c626d;
    --color-home-shortcut-hover-surface: rgba(255,255,255,.075);
    --color-home-shortcut-muted: #9ea4ae;
    --color-show-type-surface: #f0ece5;
    --color-show-type-text: #565b58;
    --color-compact-action-surface: #f4f2ee;
    --color-compact-action-hover: #eae7e1;
    --color-dark-helper-text: #aeb3bc;
    --color-dark-input-border: #3a404a;
    --color-dark-input-placeholder: #8f96a2;
    --color-filter-surface: #30353e;
    --color-filter-heading: #d9dde3;
    --color-filter-label: #eef0f3;
    --color-filter-control-border: #414751;
    --color-show-result-hover-border: #c9c3ba;
    --shadow-show-result-hover: 0 8px 24px rgba(16,18,22,.05);
    --color-playlist-match-border: #e5d9c9;
    --color-playlist-match-surface: #fbf7ef;
    --color-playlist-match-label: #765a37;
    --color-show-action-surface: #f2f0eb;
    --color-show-action-hover: #e9e6df;
    --color-show-type-on-dark: #ff9a73;
    --color-show-detail-meta: #b8bec7;
    --color-show-detail-divider: #636a74;
    --color-search-panel-fallback: #111419;
    --color-search-example-muted: #afb5bc;
    --color-filter-label-light: #f4f4f2;
    --color-filter-clear: #d9ddd9;
    --color-filter-chip-surface: #ebe6dd;
    --color-filter-chip-text: #353b36;
    --color-filter-chip-clear: #1f624d;
    --shadow-show-card-hover: 0 8px 20px rgba(17,20,25,.08);
    --color-mode-tabs-surface: #e9e5de;
    --color-mode-tabs-text: #252a27;
    --color-music-clear: #dfe1df;
    --color-az-text: #e9ecea;
    --color-music-result-hover-border: #cfc9bf;
    --color-music-result-strong: #303632;
    --color-music-profile-glow: rgba(255,112,72,.15);
    --color-music-profile-stats: #d1d5d2;
    --color-counterpart-pill: #f0ede7;
    --color-appearance-day: #1f2421;
    --color-mode-tabs-mobile-surface: #e7e2da;
    --color-mode-tabs-mobile-text: #555b57;
    --shadow-mode-tabs-selected: 0 1px 4px rgba(16,18,22,.10);
    --color-dark-panel-text: #f4f5f4;
    --color-dark-panel-placeholder: #aab1ba;
    --color-dark-panel-clear: #f1f3f1;
    --color-filter-summary-state: #abb1b8;
    --color-archive-example-muted: #aeb4b8;
    --color-archive-example-link: #d7dadd;
    --color-archive-example-link-hover: rgba(215,218,221,.55);

    /* Phase 2B — semantic typography scale for recurring component roles. */
    --type-size-micro: .74rem;
    --type-size-label: .76rem;
    --type-size-table: .8rem;
    --type-size-meta-sm: .86rem;
    --type-size-control-sm: .88rem;
    --type-size-body-sm: .92rem;
    --type-size-body-compact: .96rem;
    --type-size-intro-compact: .98rem;
    --type-size-card-title: 1.1rem;
    --type-size-card-title-lg: 1.18rem;
    --type-size-title-sm: 1.25rem;
    --type-size-title-md: 1.3rem;
    --type-size-title-lg: 1.8rem;


    /* Phase 2B — component typography roles completing public font-size migration. */
    --type-size-status: .75rem;
    --type-size-brand-sub: .69rem;
    --type-size-track-number-mobile: .7rem;
    --type-size-feature-note: .79rem;
    --type-size-context: .85rem;
    --type-size-show-title-compact: .87rem;
    --type-size-rank-title: .91rem;
    --type-size-detail-meta: .94rem;
    --type-size-ranking-mobile: .95rem;
    --type-size-search-input: 1.03rem;
    --type-size-music-result-title: 1.05rem;
    --type-size-recent-show-title: 1.08rem;
    --type-size-card-title-alt: 1.12rem;
    --type-size-appearance-day-mobile: 1.4rem;
    --type-size-stat-value-mobile: 1.45rem;
    --type-size-section-mobile: 1.5rem;
    --type-size-appearance-day: 1.55rem;
    --type-size-results-title: 1.65rem;
    --type-size-playlist-title: 1.7rem;
    --type-size-success-mark: 2rem;
    --type-size-stream-number-mobile: 2.3rem;
    --type-size-stream-number: 3.7rem;
    --type-size-display-number: 4rem;

    /* Interaction/motion. */
    --duration-fast: .15s;
    --easing-standard: ease;

    /* Common component geometry identified by the audit. */
    --control-height: 44px;
    --control-height-compact: 36px;
    --touch-target-min: 44px;

    /* Common component spacing. These name purpose, not numeric position. */
    --component-gap-xs: 6px;
    --component-gap-sm: 8px;
    --component-gap-md: 12px;
    --component-gap-lg: 16px;
    --component-padding-sm: 12px;
    --component-padding-md: 16px;
    --component-padding-lg: 20px;
    --component-padding-xl: 24px;

    /* Typography roles: component CSS may map to these during migration. */
    --type-size-helper: .72rem;
    --type-size-small: .78rem;
    --type-size-meta: .82rem;
    --type-size-body: 1rem;
    --type-size-intro: 1.02rem;

    /* Layout thresholds currently repeated in public CSS. */
    --breakpoint-mobile: 760px;
    --content-measure: 680px;
}