/* ============================================================================
   BayStore Design System — Colors & Type
   Single source of truth for color, typography, spacing, radius, elevation,
   and motion tokens. Dark is the default (the control-plane / console surface).
   Add data-theme="light" (or class .theme-light) to a root element for the
   commercial / catalog surface.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. FONT FAMILIES
   - Display : Space Grotesk when self-hosted/installed, then system UI
   - Sans    : IBM Plex Sans when self-hosted/installed, then system UI
   - Mono    : IBM Plex Mono when self-hosted/installed, then platform mono
---------------------------------------------------------------------------- */
:root {
  --font-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale — expressed in rem so type honors the user's browser font-size
     preference (accessibility), while component geometry below stays in px for
     density and crisp direct-editing. Default root is 16px ⇒ base = 14px, the
     deliberate dense-UI size. Multiply the whole scale at once with --type-scale
     (e.g. set :root{--type-scale:1.07} to bump every step ~7%). */
  --type-scale: 1;
  --text-2xs: calc(0.6875rem * var(--type-scale));  /* 11px */
  --text-xs:  calc(0.75rem   * var(--type-scale));  /* 12px */
  --text-sm:  calc(0.8125rem * var(--type-scale));  /* 13px */
  --text-base:calc(0.875rem  * var(--type-scale));  /* 14px */
  --text-md:  calc(0.9375rem * var(--type-scale));  /* 15px */
  --text-lg:  calc(1.0625rem * var(--type-scale));  /* 17px */
  --text-xl:  calc(1.25rem   * var(--type-scale));  /* 20px */
  --text-2xl: calc(1.5rem    * var(--type-scale));  /* 24px */
  --text-3xl: calc(1.875rem  * var(--type-scale));  /* 30px */
  --text-4xl: calc(2.375rem  * var(--type-scale));  /* 38px */
  --text-5xl: calc(3rem      * var(--type-scale));  /* 48px */
  --text-6xl: calc(4rem      * var(--type-scale));  /* 64px */
  --text-7xl: calc(5rem      * var(--type-scale));  /* 80px */

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: 0em;
  --tracking-snug: 0em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;  /* eyebrows / overline labels */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ----- SPACING (4px base grid) ----- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ----- RADIUS ----- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-full: 999px;

  /* ----- MOTION ----- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;

  /* ----- BRAND CONSTANTS (theme-independent) -----
     The "bay" palette: OCEAN (primary), SUN (warm accent), SHELL (sand neutral).
     These hero values stay constant across themes; the per-theme --primary /
     --sun-* below are tuned for contrast on each background.
     NOTE on sun vs. pending: SUN is a *brand decoration* token (solid fills,
     eyebrows, "popular" badges) and never carries a lifecycle dot. The pending
     *status* hue is pulled toward amber-orange (see --st-pending) so the two
     never read as the same color when scanned. Rule: never use sun to signal
     state, never use a status hue as decoration. */
  --ocean: #12AEC0;        /* bay teal — the primary brand hue */
  --ocean-deep: #0B8C9C;   /* deep water — the applied primary on the light/catalog surface */
  --sun: #F7B43C;          /* warm gold — secondary accent */
  --sun-deep: #E0941A;     /* low sun — sun used as text/border */
  --shell: #F3E9DB;        /* warm sand — light-theme paper */
  --shell-pink: #ECC9BC;   /* soft shell — gentle warm tint */
  --bay-gradient: linear-gradient(135deg, #12AEC0 0%, #2CC4D5 45%, #F7B43C 140%);
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--primary);
}

/* ----------------------------------------------------------------------------
   2. DARK THEME — default. The operator console & customer dashboard.
   A near-black blue-graphite base; light text; azure primary; full
   lifecycle status palette.
---------------------------------------------------------------------------- */
:root,
[data-theme="dark"],
.theme-dark {
  color-scheme: dark;

  /* Backgrounds / surfaces (low → high elevation) */
  --bg-base: #0A0C10;        /* app canvas */
  --bg-inset: #06080C;       /* wells, code blocks, recessed areas */
  --bg-surface: #11141B;     /* cards, panels */
  --bg-surface-2: #161A23;   /* raised: inputs, menus, hover rows */
  --bg-surface-3: #1D222D;   /* popovers, tooltips, active rows */

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.17);

  /* Foreground text (1 = strongest) */
  --fg-1: #E9ECF2;
  --fg-2: #A4ADBD;
  --fg-3: #7C8694;   /* muted text — tuned to clear AA 4.5:1 on raised surfaces, not just --bg-base */
  --fg-4: #474E5C;   /* decorative / disabled only — not for text that must be read */
  --fg-on-accent: #FFFFFF;

  /* Primary — ocean (bay teal) */
  --primary: #12AEC0;
  --primary-hover: #2CC4D5;
  --primary-active: #0D93A3;
  --primary-fg: #04181B;     /* deep ink on bright teal — AA-legible */
  --primary-subtle: rgba(18, 174, 192, 0.14);
  --primary-subtle-border: rgba(18, 174, 192, 0.36);
  --primary-text: #4FD3E1;   /* ocean used as text on dark */

  /* Sun — warm accent (eyebrows, highlights, sun motif) */
  --sun-color: #F7B43C;
  --sun-text: #F9C76A;
  --sun-subtle: rgba(247, 180, 60, 0.14);
  --sun-subtle-border: rgba(247, 180, 60, 0.36);

  /* ---- LIFECYCLE STATUS PALETTE ----
     Each state: --st-x (solid), --st-x-bg (pill fill), --st-x-border. */
  --st-pending: #F3961A;        /* amber-orange — pulled off brand gold so it never reads as sun */
  --st-pending-bg: rgba(243, 150, 26, 0.13);
  --st-pending-border: rgba(243, 150, 26, 0.34);

  --st-provisioning: #3D7BFF;   /* azure — work in progress (kept distinct from ocean primary) */
  --st-provisioning-bg: rgba(61, 123, 255, 0.13);
  --st-provisioning-border: rgba(61, 123, 255, 0.34);

  --st-active: #2DD17F;         /* green — healthy */
  --st-active-bg: rgba(45, 209, 127, 0.13);
  --st-active-border: rgba(45, 209, 127, 0.34);

  --st-suspended: #FF8A3D;      /* orange — paused/held */
  --st-suspended-bg: rgba(255, 138, 61, 0.13);
  --st-suspended-border: rgba(255, 138, 61, 0.34);

  --st-upgrading: #A878FF;      /* violet — transition */
  --st-upgrading-bg: rgba(168, 120, 255, 0.13);
  --st-upgrading-border: rgba(168, 120, 255, 0.34);

  --st-failed: #FF5C5C;         /* red — error */
  --st-failed-bg: rgba(255, 92, 92, 0.13);
  --st-failed-border: rgba(255, 92, 92, 0.34);

  --st-deleted: #7C8694;        /* neutral — terminal (AA-legible on subtle fill) */
  --st-deleted-bg: rgba(124, 134, 148, 0.14);
  --st-deleted-border: rgba(124, 134, 148, 0.32);

  /* Elevation — dark relies on border + soft ambient shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-default);
}

/* ----------------------------------------------------------------------------
   3. LIGHT THEME — the commercial catalog / marketing surface.
---------------------------------------------------------------------------- */
[data-theme="light"],
.theme-light {
  color-scheme: light;

  --bg-base: #FBF6EE;        /* warm sand paper */
  --bg-inset: #F0E6D6;       /* deeper sand — wells */
  --bg-surface: #FFFDF9;     /* warm white card */
  --bg-surface-2: #F6EEE1;   /* raised sand — inputs, menus, hover rows */
  --bg-surface-3: #FDFAF4;   /* most-raised — popovers, tooltips, active rows. Distinct from --bg-surface so the hover/active step is visible in light (was identical, collapsing elevation). */

  --border-subtle: rgba(74, 52, 22, 0.07);
  --border-default: rgba(74, 52, 22, 0.13);
  --border-strong: rgba(74, 52, 22, 0.20);

  --fg-1: #1C1710;
  --fg-2: #595045;
  --fg-3: #756A59;   /* muted text — darkened to clear AA 4.5:1 on warm-white surfaces */
  --fg-4: #AEA48F;   /* decorative / disabled only */
  --fg-on-accent: #04181B;

  --primary: var(--ocean-deep);   /* #0B8C9C — wired to the brand constant, no longer a stray literal */
  --primary-hover: #097A89;
  --primary-active: #086A78;
  --primary-fg: #FFFFFF;
  --primary-subtle: rgba(11, 140, 156, 0.10);
  --primary-subtle-border: rgba(11, 140, 156, 0.30);
  --primary-text: #0B7A89;

  --sun-color: #E0941A;
  --sun-text: #B5740A;
  --sun-subtle: rgba(247, 180, 60, 0.18);
  --sun-subtle-border: rgba(224, 148, 26, 0.34);

  --st-pending: #9A5B0A;         /* amber-orange, AA-tuned for warm-white — distinct from sun-text */
  --st-pending-bg: rgba(243, 150, 26, 0.15);
  --st-pending-border: rgba(154, 91, 10, 0.30);

  --st-provisioning: #2356C7;
  --st-provisioning-bg: rgba(61, 123, 255, 0.14);
  --st-provisioning-border: rgba(46, 102, 230, 0.30);

  --st-active: #0A7A45;
  --st-active-bg: rgba(45, 209, 127, 0.15);
  --st-active-border: rgba(14, 158, 91, 0.30);

  --st-suspended: #B0530F;
  --st-suspended-bg: rgba(255, 138, 61, 0.15);
  --st-suspended-border: rgba(204, 99, 21, 0.30);

  --st-upgrading: #6A3FC2;
  --st-upgrading-bg: rgba(168, 120, 255, 0.15);
  --st-upgrading-border: rgba(123, 79, 214, 0.30);

  --st-failed: #C42E2E;
  --st-failed-bg: rgba(255, 92, 92, 0.13);
  --st-failed-border: rgba(214, 59, 59, 0.30);

  --st-deleted: #5E6673;
  --st-deleted-bg: rgba(94, 102, 115, 0.12);
  --st-deleted-border: rgba(94, 102, 115, 0.28);

  --shadow-sm: 0 1px 2px rgba(74, 52, 22, 0.07);
  --shadow-md: 0 4px 14px rgba(74, 52, 22, 0.10);
  --shadow-lg: 0 14px 40px rgba(74, 52, 22, 0.12);
  --shadow-xl: 0 28px 70px rgba(74, 52, 22, 0.16);
  --shadow-pop: 0 10px 34px rgba(74, 52, 22, 0.16), 0 0 0 1px var(--border-default);
}

/* ----------------------------------------------------------------------------
   4. SEMANTIC TYPOGRAPHY
   Helper classes that encode the type system. Use these or copy the rules.
---------------------------------------------------------------------------- */
.ds-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.ds-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.ds-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.ds-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.ds-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.ds-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
/* Overline / eyebrow label — small, uppercase, tracked-out. A signature. */
.ds-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
/* Mono — identifiers, state names, data, timestamps. */
.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  font-feature-settings: "zero" 1;  /* slashed zero */
}
.ds-numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1, "tnum" 1;
}