/*
 * BeHive design system: tokens.
 * Components use semantic tokens (--bh-*) only, never primitives (--p-*).
 * Themes reassign semantic tokens on [data-theme].
 *
 * Visual language: honey. The amber of the logo hexagon is the action
 * colour: primary buttons are honey with ink labels and sit on a 2px ledge
 * they press into. A warm near-black header carries the logo; the rail sits
 * on the page ground and the current item is a raised key marked with the
 * hexagon. Neutrals lean warm without going cream, tags are 6px labels,
 * cards have 14px corners, and Bricolage Grotesque headlines sit over
 * Inter. Storage tier hues come from the chart palette.
 */

@layer reset, tokens, base, components, utilities;

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-ext-wght-normal.1ad231aac0a8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/bricolage-grotesque-latin-ext-wght-normal.b1ae2c312cfb.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/bricolage-grotesque-latin-wght-normal.ada540c0e24a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer tokens {
  :root {
    /* Primitives: ink, stone, white. */
    --p-ink: #1b1915;
    --p-stone: #f3f3f1;
    --p-white: #ffffff;

    /* Primitives: the propolis header (warm near-black). */
    --p-propolis: #221d17;

    /* Primitives: the honey scale, the accent. Ink labels on honey-500
       hold 9:1; honey-800 text on white holds 6.4:1; honey-700 edges on
       white hold 3:1 for borders and focus. */
    --p-honey-50: #fff6dc;
    --p-honey-100: #ffe7a6;
    --p-honey-200: #f2c25a;
    --p-honey-300: #ffc85a;
    --p-honey-400: #ffc04a;
    --p-honey-500: #f2ad1d;
    --p-honey-600: #e09a06;
    --p-honey-700: #a46e00;
    --p-honey-800: #8a5200;
    --p-honey-900: #6b3f00;

    /* Primitives: the indigo and petrol scales, the alternative colour
       schemes ([data-accent], picked in the account menu). White labels
       on 500 hold 6.2:1 (indigo) and 5.3:1 (petrol); 500 text on white
       holds the same. */
    --p-indigo-50: #eff2ff;
    --p-indigo-100: #dde3ff;
    --p-indigo-300: #9daefc;
    --p-indigo-500: #3f51d8;
    --p-indigo-600: #2f3db0;
    --p-indigo-700: #232e88;
    --p-indigo-shell: #1f2347;
    --p-indigo-shell-dark: #151832;
    --p-petrol-50: #eefafb;
    --p-petrol-100: #d3f1f4;
    --p-petrol-300: #7fd3dd;
    --p-petrol-500: #0e7686;
    --p-petrol-600: #0b5d6a;
    --p-petrol-700: #08474f;
    --p-petrol-shell: #14343d;
    --p-petrol-shell-dark: #0d242b;

    /* Brand amber: the logo mark. Logo, count badge and brand surfaces
       only, never a tier or a status. */
    --p-brand-amber: #ffbb25;

    /* Primitives: storage tier hues, from the chart palette. Chips and
       labels derive their pastel fill and their ink from these. */
    --p-tier-catalog: #2bb3ff;
    --p-tier-hot: #ff642d;
    --p-tier-cold: #00b3c7;
    --p-tier-nearline: #f67cf2;
    --p-tier-cloud: #00c192;
    --p-tier-physical: #c98a4b;
    --p-tier-space: #9a6bff;
    --p-tier-offline: #a3b828;
    --p-tier-slate: #8a8e9b;
    --p-tier-neutral: #a9abb6;

    /* Active picture outline on the image overlay, which is always dark:
       the broadcast safe-area green of the classic view. */
    --p-picture-area: #3ddc84;

    /* Type: Inter, on a 12/13/14/16/19/23/28 scale. */
    --bh-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bh-font-display: 'Bricolage Grotesque', var(--bh-font);
    --bh-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --bh-text-xs: 0.75rem;
    --bh-text-sm: 0.8125rem;
    --bh-text-base: 0.875rem;
    --bh-text-md: 1rem;
    --bh-text-lg: 1.1875rem;
    --bh-text-xl: 1.4375rem;
    --bh-text-2xl: 1.75rem;
    --bh-leading-tight: 1.2;
    --bh-leading: 1.42;
    --bh-display-track: -0.025em;

    /* Space: 4px grid. */
    --bh-space-1: 0.25rem;
    --bh-space-2: 0.5rem;
    --bh-space-3: 0.75rem;
    --bh-space-4: 1rem;
    --bh-space-5: 1.25rem;
    --bh-space-6: 1.5rem;
    --bh-space-8: 2rem;
    --bh-space-10: 2.5rem;
    --bh-space-12: 3rem;

    /* Shape: 2px lines, firm corners; tags are labels, not pills. */
    --bh-line: 2px;
    --bh-ledge: 2px;
    --bh-radius-sm: 6px;
    --bh-radius: 10px;
    --bh-radius-lg: 14px;
    --bh-radius-xl: 20px;
    --bh-radius-tag: 6px;
    --bh-radius-full: 999px;
    --bh-dot: 8px;
    --bh-header-h: 56px;
    --bh-rail-w: 240px;
    --bh-rail-w-collapsed: 64px;
    --bh-control-h: 36px;
    --bh-control-h-sm: 30px;

    /* Motion: state changes only. */
    --bh-ease: cubic-bezier(0.2, 0, 0, 1);
    --bh-dur: 160ms;

    /* Tier hues: identical in every theme. */
    --bh-tier-catalog: var(--p-tier-catalog);
    --bh-tier-hot: var(--p-tier-hot);
    --bh-tier-cold: var(--p-tier-cold);
    --bh-tier-nearline: var(--p-tier-nearline);
    --bh-tier-cloud: var(--p-tier-cloud);
    --bh-tier-space: var(--p-tier-space);
    --bh-tier-physical: var(--p-tier-physical);
    --bh-tier-offline: var(--p-tier-offline);
    --bh-tier-ingesting: repeating-linear-gradient(
      -45deg,
      var(--p-tier-slate) 0 2px,
      transparent 2px 4px
    );
    --bh-tier-data: var(--p-tier-neutral);
    --bh-tier-unknown: var(--p-tier-neutral);
    --bh-tier-deleted: var(--p-tier-neutral);

    /* Brand. */
    --bh-brand: var(--p-brand-amber);
    --bh-on-brand: var(--p-ink);

    /* Media overlays (player, image viewer): always dark, in every theme. */
    --bh-overlay: var(--p-ink);
    --bh-on-overlay: var(--p-white);
    --bh-picture-area: var(--p-picture-area);
    --bh-overlay-accent: var(--p-honey-300);
    --bh-overlay-content: var(--p-tier-cold);
    --bh-overlay-warning: #ff9a62;
    --bh-overlay-danger: #ff7f8e;

    /* Header: propolis in every theme. */
    --bh-shell: var(--p-propolis);
    --bh-shell-raised: rgb(255 255 255 / 0.1);
    --bh-shell-raised-hover: rgb(255 255 255 / 0.16);
    --bh-shell-border: rgb(255 255 255 / 0.15);
    --bh-shell-text: #ffffff;
    --bh-shell-muted: rgb(255 255 255 / 0.75);
    --bh-shell-scrim: rgb(27 25 21 / 0.5);
    --bh-shell-focus: var(--p-honey-300);
    --bh-shell-field: var(--p-white);
    --bh-shell-field-text: var(--p-ink);
    --bh-shell-field-muted: #6b6760;
  }

  :root,
  [data-theme='light'] {
    color-scheme: light;
    --bh-ground: var(--p-stone);
    --bh-surface: var(--p-white);
    --bh-surface-sunken: var(--p-stone);
    --bh-surface-hover: #f5f3ee;
    --bh-stripe: #f8f6f1;
    --bh-text: var(--p-ink);
    --bh-text-muted: #6b6760;
    --bh-text-faint: #6b6760;
    --bh-border: #e6e3dc;
    --bh-border-strong: #d8d3c8;
    --bh-control-border: #8c8478;
    --bh-control-fill: rgb(120 110 95 / 0.1);
    --bh-control-fill-hover: rgb(120 110 95 / 0.18);
    --bh-control-fill-active: rgb(120 110 95 / 0.26);
    --bh-accent: var(--p-honey-500);
    --bh-accent-hover: var(--p-honey-600);
    --bh-accent-active: var(--p-honey-600);
    --bh-accent-ledge: var(--p-honey-700);
    --bh-accent-edge: var(--p-honey-700);
    --bh-accent-text: var(--p-honey-800);
    --bh-accent-text-strong: var(--p-honey-900);
    --bh-accent-soft: var(--p-honey-50);
    --bh-accent-soft-hover: var(--p-honey-100);
    --bh-on-accent: var(--p-ink);
    --bh-link-underline: var(--p-honey-200);
    --bh-focus: var(--p-honey-700);
    --bh-focus-ring: rgb(242 173 29 / 0.4);
    --bh-selection: var(--p-honey-100);
    --bh-btn-border: #d8d3c8;
    --bh-success: #0f7a4f;
    --bh-success-soft: #ddf5e8;
    --bh-success-line: #a6e3c4;
    --bh-warning: #b4400a;
    --bh-warning-soft: #fdebe0;
    --bh-warning-line: #f8c9ad;
    --bh-danger: #c4122f;
    --bh-danger-solid: #c4122f;
    --bh-danger-solid-hover: #9e0d25;
    --bh-danger-ledge: #7a0a1c;
    --bh-danger-soft: #fdeaee;
    --bh-danger-line: #f6c4cd;
    --bh-danger-ring: rgb(196 18 47 / 0.4);
    --bh-info: #57534c;
    --bh-info-soft: #eeece7;
    --bh-info-line: #e2ded6;
    /* Blue: actions that move or export (info stays neutral grey). */
    --bh-blue: #1f5fbf;
    --bh-blue-soft: #e4eefc;
    --bh-blue-line: #b9d0f3;
    --bh-chart: var(--p-honey-600);
    --bh-popper-border: #e6e3dc;
    --bh-shadow: 0 12px 32px rgb(34 29 23 / 0.14), 0 2px 6px rgb(34 29 23 / 0.08);
    --bh-shadow-modal: 0 24px 64px rgb(34 29 23 / 0.24);
    --bh-skeleton: #ece9e2;

    /* Sidebar: on the ground; the current item is a raised key. */
    --bh-nav-bg: var(--p-stone);
    --bh-nav-border: #e6e3dc;
    --bh-nav-text: #4f4a42;
    --bh-nav-icon: #8c8478;
    --bh-nav-hover: rgb(120 110 95 / 0.1);
    --bh-nav-active: var(--p-white);
    --bh-nav-active-text: var(--p-ink);
    --bh-nav-active-border: #d8d3c8;
    --bh-nav-mark: var(--p-honey-500);
    --bh-nav-heading: #6b6760;
  }

  [data-theme='dark'] {
    color-scheme: dark;
    --bh-ground: #171512;
    --bh-surface: #211e1a;
    --bh-surface-sunken: #29251f;
    --bh-surface-hover: #2c2822;
    --bh-stripe: #29251f;
    --bh-text: #f3f1ec;
    --bh-text-muted: #aaa49a;
    --bh-text-faint: #aaa49a;
    --bh-border: #37322b;
    --bh-border-strong: #4a443a;
    --bh-control-border: #857d70;
    --bh-control-fill: rgb(170 164 154 / 0.12);
    --bh-control-fill-hover: rgb(170 164 154 / 0.2);
    --bh-control-fill-active: rgb(170 164 154 / 0.28);
    --bh-accent: var(--p-honey-500);
    --bh-accent-hover: var(--p-honey-400);
    --bh-accent-active: var(--p-honey-600);
    --bh-accent-ledge: #7a5100;
    --bh-accent-edge: var(--p-honey-500);
    --bh-accent-text: var(--p-honey-300);
    --bh-accent-text-strong: #ffe2a0;
    --bh-accent-soft: #3a2e14;
    --bh-accent-soft-hover: #4a3b19;
    --bh-on-accent: var(--p-ink);
    --bh-link-underline: #7a5a1c;
    --bh-focus: var(--p-honey-300);
    --bh-focus-ring: rgb(242 173 29 / 0.45);
    --bh-selection: #4a3b19;
    --bh-btn-border: #4a443a;
    --bh-success: #5fd39c;
    --bh-success-soft: #132a1f;
    --bh-success-line: #1f4a35;
    --bh-warning: #ff9a62;
    --bh-warning-soft: #3a2014;
    --bh-warning-line: #6a3519;
    --bh-danger: #ff7f8e;
    --bh-danger-solid: #c4122f;
    --bh-danger-solid-hover: #9e0d25;
    --bh-danger-ledge: #5c0a17;
    --bh-danger-soft: #3b1a20;
    --bh-danger-line: #6e2335;
    --bh-danger-ring: rgb(255 127 142 / 0.5);
    --bh-info: #cfc9bf;
    --bh-info-soft: #2c2822;
    --bh-info-line: #3a352d;
    --bh-blue: #8db8ff;
    --bh-blue-soft: #172338;
    --bh-blue-line: #284268;
    --bh-chart: var(--p-honey-300);
    --bh-popper-border: #4a443a;
    --bh-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
    --bh-shadow-modal: 0 24px 64px rgb(0 0 0 / 0.6);
    --bh-skeleton: #2e2a24;
    --bh-shell: #25201a;

    --bh-nav-bg: #171512;
    --bh-nav-border: #2c2822;
    --bh-nav-text: #d4cec3;
    --bh-nav-icon: #8a8378;
    --bh-nav-hover: #2a2620;
    --bh-nav-active: #211e1a;
    --bh-nav-active-text: #f3f1ec;
    --bh-nav-active-border: #4a443a;
    --bh-nav-mark: var(--p-honey-500);
    --bh-nav-heading: #aaa49a;
  }


  /* Colour schemes: indigo and petrol (accent study). Each sets its ramp
     (--bh-a-*); the blocks below recolour the header and the accent and
     move the neutrals to cool greys whose borders and stripes take a trace
     of the accent. The logo amber, tiers and statuses stay. */
  [data-accent='indigo'] {
    --bh-a-50: var(--p-indigo-50);
    --bh-a-100: var(--p-indigo-100);
    --bh-a-300: var(--p-indigo-300);
    --bh-a-500: var(--p-indigo-500);
    --bh-a-600: var(--p-indigo-600);
    --bh-a-700: var(--p-indigo-700);
    --bh-a-shell: var(--p-indigo-shell);
    --bh-a-shell-dark: var(--p-indigo-shell-dark);
  }

  [data-accent='petrol'] {
    --bh-a-50: var(--p-petrol-50);
    --bh-a-100: var(--p-petrol-100);
    --bh-a-300: var(--p-petrol-300);
    --bh-a-500: var(--p-petrol-500);
    --bh-a-600: var(--p-petrol-600);
    --bh-a-700: var(--p-petrol-700);
    --bh-a-shell: var(--p-petrol-shell);
    --bh-a-shell-dark: var(--p-petrol-shell-dark);
  }

  :is([data-accent='indigo'], [data-accent='petrol']),
  :is([data-accent='indigo'], [data-accent='petrol']) [data-theme] {
    --bh-ground: #f4f5f9;
    --bh-surface: var(--p-white);
    --bh-surface-sunken: #f4f5f9;
    --bh-surface-hover: #f2f3f7;
    --bh-stripe: color-mix(in srgb, var(--bh-a-500) 5%, #f8f8fa);
    --bh-text: #191b23;
    --bh-text-muted: #62646f;
    --bh-text-faint: #62646f;
    --bh-border: color-mix(in srgb, var(--bh-a-500) 12%, #e4e5ec);
    --bh-border-strong: color-mix(in srgb, var(--bh-a-500) 18%, #d3d4de);
    --bh-control-border: #7f8290;
    --bh-control-fill: rgb(98 100 111 / 0.1);
    --bh-control-fill-hover: rgb(98 100 111 / 0.18);
    --bh-control-fill-active: rgb(98 100 111 / 0.26);
    --bh-btn-border: var(--bh-border-strong);
    --bh-popper-border: var(--bh-border);
    --bh-info: #545663;
    --bh-info-soft: #ebecf1;
    --bh-info-line: #dfe0e7;
    --bh-skeleton: #e9eaf0;
    --bh-shadow: 0 12px 32px rgb(25 27 35 / 0.14), 0 2px 6px rgb(25 27 35 / 0.08);
    --bh-shadow-modal: 0 24px 64px rgb(25 27 35 / 0.24);
    --bh-shell-field-muted: #62646f;

    --bh-shell: var(--bh-a-shell);
    --bh-shell-focus: var(--bh-a-300);
    --bh-overlay-accent: var(--bh-a-300);
    --bh-accent: var(--bh-a-500);
    --bh-accent-hover: var(--bh-a-600);
    --bh-accent-active: var(--bh-a-600);
    --bh-accent-ledge: var(--bh-a-700);
    --bh-accent-edge: var(--bh-a-500);
    --bh-accent-text: var(--bh-a-500);
    --bh-accent-text-strong: var(--bh-a-600);
    --bh-accent-soft: var(--bh-a-50);
    --bh-accent-soft-hover: var(--bh-a-100);
    --bh-on-accent: var(--p-white);
    --bh-link-underline: var(--bh-a-300);
    --bh-focus: var(--bh-a-600);
    --bh-focus-ring: color-mix(in srgb, var(--bh-a-500) 30%, transparent);
    --bh-selection: var(--bh-a-100);
    --bh-chart: var(--bh-a-500);

    --bh-nav-bg: var(--p-white);
    --bh-nav-border: var(--bh-border);
    --bh-nav-text: var(--bh-a-600);
    --bh-nav-icon: var(--bh-a-300);
    --bh-nav-hover: var(--bh-a-50);
    --bh-nav-active: var(--bh-a-100);
    --bh-nav-active-text: var(--bh-a-600);
    --bh-nav-active-border: var(--bh-a-100);
    --bh-nav-mark: var(--bh-a-500);
    --bh-nav-heading: #62646f;
  }

  :is([data-accent='indigo'], [data-accent='petrol'])[data-theme='dark'],
  :is([data-accent='indigo'], [data-accent='petrol']) [data-theme='dark'] {
    --bh-ground: #161925;
    --bh-surface: #1e2231;
    --bh-surface-sunken: #232737;
    --bh-surface-hover: #262a3a;
    --bh-stripe: color-mix(in srgb, var(--bh-a-500) 8%, #232737);
    --bh-text: #f4f5f9;
    --bh-text-muted: #a9abb6;
    --bh-text-faint: #a9abb6;
    --bh-border: color-mix(in srgb, var(--bh-a-500) 20%, #2a2c38);
    --bh-border-strong: color-mix(in srgb, var(--bh-a-500) 22%, #383b4b);
    --bh-control-border: #7c8091;
    --bh-control-fill: rgb(169 171 182 / 0.12);
    --bh-control-fill-hover: rgb(169 171 182 / 0.2);
    --bh-control-fill-active: rgb(169 171 182 / 0.28);
    --bh-popper-border: var(--bh-border-strong);
    --bh-info: #c9cbd4;
    --bh-info-soft: #262a3a;
    --bh-info-line: #333748;
    --bh-skeleton: #262a38;
    --bh-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
    --bh-shadow-modal: 0 24px 64px rgb(0 0 0 / 0.6);

    --bh-shell: var(--bh-a-shell-dark);
    /* Darker on hover: white labels on a lighter petrol fall under 4.5:1. */
    --bh-accent-hover: var(--bh-a-600);
    --bh-accent-ledge: color-mix(in srgb, var(--bh-a-700) 70%, black);
    --bh-accent-edge: var(--bh-a-300);
    --bh-accent-text: var(--bh-a-300);
    --bh-accent-text-strong: var(--bh-a-100);
    --bh-accent-soft: color-mix(in srgb, var(--bh-a-500) 26%, #1e2231);
    --bh-accent-soft-hover: color-mix(in srgb, var(--bh-a-500) 36%, #1e2231);
    --bh-link-underline: color-mix(in srgb, var(--bh-a-300) 45%, #1e2231);
    --bh-focus: var(--bh-a-300);
    --bh-focus-ring: color-mix(in srgb, var(--bh-a-300) 45%, transparent);
    --bh-selection: var(--bh-accent-soft-hover);
    --bh-chart: var(--bh-a-300);

    --bh-nav-bg: #1e2231;
    --bh-nav-border: var(--bh-border);
    --bh-nav-text: color-mix(in srgb, var(--bh-a-300) 60%, #e6e6ee);
    --bh-nav-icon: var(--bh-a-300);
    --bh-nav-hover: color-mix(in srgb, var(--bh-a-500) 18%, #1e2231);
    --bh-nav-active: color-mix(in srgb, var(--bh-a-500) 36%, #1e2231);
    --bh-nav-active-text: var(--bh-a-100);
    --bh-nav-active-border: transparent;
    --bh-nav-mark: var(--bh-a-300);
    --bh-nav-heading: #a9abb6;
  }
}