/* ==========================================================================
   Shopfront Studios — Design Tokens
   --------------------------------------------------------------------------
   The single source of truth for colour, type, spacing, surfaces, motion and
   layering. Components consume semantic tokens rather than raw hex values.

   Breakpoints (used consistently across the stylesheets):
     • 30rem  / 480px  — small phones
     • 40rem  / 640px  — large phones
     • 48rem  / 768px  — tablets
     • 56.25rem / 900px — navigation + two-column layouts
     • 64rem  / 1024px — desktop
     • 75rem  / 1200px — wide content
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     Brand palette
     ---------------------------------------------------------------------- */
  --brand-ink: #060a16;
  --brand-night: #050812;
  --brand-violet: #6d5cff;
  --brand-lime: #4fd8ff;
  --brand-coral: #ff4fd8;
  --brand-sky: #2f7bff;
  --brand-gold: #b9c9ff;

  /* Neutral tints used for light surfaces */
  --brand-paper: #f3f6ff;
  --brand-paper-bright: #fbfdff;
  --brand-paper-soft: #e6ebfc;

  /* ----------------------------------------------------------------------
     Semantic colour — dark surfaces (default)
     ---------------------------------------------------------------------- */
  --color-bg: var(--brand-night);
  --color-bg-deep: #04060e;
  --color-surface-1: #0a1022;
  --color-surface-2: #0e1530;
  --color-surface-3: #141d3d;
  --color-surface-raised: #0c142b;

  --color-text: #f2f6ff;
  --color-text-soft: #c3cdf0;
  --color-text-muted: #94a2c8;
  --color-text-faint: #7482a8;

  --color-line: rgba(175, 198, 255, 0.14);
  --color-line-strong: rgba(175, 198, 255, 0.26);
  --color-line-accent: rgba(79, 216, 255, 0.5);

  --color-accent: var(--brand-lime);
  --color-accent-strong: #8be9ff;
  --color-accent-ink: #04101c;
  --color-violet: var(--brand-violet);
  --color-coral: var(--brand-coral);
  --color-sky: var(--brand-sky);
  --color-gold: var(--brand-gold);

  --color-focus: #4fd8ff;
  --color-selection-bg: #4fd8ff;
  --color-selection-text: #04101c;

  /* Ambient lighting is intentionally low-opacity and fixed to the viewport. */
  --glow-ambient:
    radial-gradient(56rem 40rem at 88% -12%, rgba(47, 123, 255, 0.28), transparent 62%),
    radial-gradient(42rem 34rem at -8% 24%, rgba(255, 79, 216, 0.16), transparent 62%),
    radial-gradient(44rem 34rem at 52% 108%, rgba(79, 216, 255, 0.12), transparent 68%),
    radial-gradient(30rem 24rem at 64% 46%, rgba(109, 92, 255, 0.08), transparent 70%);
  --glow-violet: rgba(109, 92, 255, 0.42);
  --glow-lime: rgba(47, 123, 255, 0.3);
  --glow-sky: rgba(79, 216, 255, 0.24);
  --glow-coral: rgba(255, 79, 216, 0.2);

  --gradient-iridescent: linear-gradient(
    100deg,
    #6d5cff 0%,
    #2f7bff 34%,
    #4fd8ff 64%,
    #ff4fd8 100%
  );
  --gradient-panel: linear-gradient(
    155deg,
    rgba(43, 61, 112, 0.52),
    rgba(13, 21, 46, 0.86) 56%,
    rgba(5, 8, 18, 0.96)
  );

  /* ----------------------------------------------------------------------
     Typography
     ---------------------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 0.625rem;
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
  --heading-sm: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  --heading-md: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
  --heading-lg: clamp(2.75rem, 1.9rem + 3.9vw, 4.75rem);
  --display: clamp(3rem, 1.7rem + 6vw, 6.75rem);

  --leading-tight: 0.94;
  --leading-heading: 1.04;
  --leading-snug: 1.4;
  --leading-body: 1.7;

  --tracking-display: -0.055em;
  --tracking-heading: -0.035em;
  --tracking-label: 0.14em;

  /* ----------------------------------------------------------------------
     Spacing, sizing and radii
     ---------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  --gutter: clamp(1.125rem, 3.5vw, 2.75rem);
  --section-space: clamp(4rem, 7.5vw, 7.5rem);
  --container: 75rem;
  --container-narrow: 56rem;

  --header-height: 4rem;
  --control-height: 2.75rem;

  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 1.9rem;
  --radius-2xl: 2.5rem;
  --radius-pill: 999px;

  /* ----------------------------------------------------------------------
     Elevation, motion and layering
     ---------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-panel: 0 30px 80px -38px rgba(0, 0, 0, 0.9);
  --shadow-float: 0 30px 80px -24px rgba(0, 0, 0, 0.72);
  --shadow-lime: 0 18px 60px -26px rgba(47, 123, 255, 0.55);
  --ring: 0 0 0 3px rgba(79, 216, 255, 0.24);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 650ms;

  --z-header: 40;
  --z-chat: 60;
  --z-modal: 80;
  --z-toast: 90;
  --z-skip: 100;

  color-scheme: dark;
}

/* ==========================================================================
   Light surfaces
   --------------------------------------------------------------------------
   Apply `.surface-light` to a region to invert the semantic tokens. Any
   component inside inherits the correct ink, line, accent and focus colours
   without component-specific overrides.
   ========================================================================== */

.surface-light {
  --color-bg: var(--brand-paper);
  --color-bg-deep: var(--brand-paper-soft);
  --color-surface-1: var(--brand-paper-bright);
  --color-surface-2: #ffffff;
  --color-surface-3: var(--brand-paper-soft);
  --color-surface-raised: var(--brand-paper-bright);

  --color-text: var(--brand-ink);
  --color-text-soft: #4a3a6b;
  --color-text-muted: #6a5b89;
  --color-text-faint: #6f618b;

  --color-line: rgba(22, 11, 46, 0.12);
  --color-line-strong: rgba(22, 11, 46, 0.22);
  --color-line-accent: rgba(90, 52, 219, 0.42);

  --color-accent: #2f6bff;
  --color-accent-strong: #1f52d9;
  --color-accent-ink: var(--brand-paper-bright);
  --color-focus: #2f6bff;
  --color-selection-bg: var(--brand-ink);
  --color-selection-text: var(--brand-paper-bright);

  background-color: var(--color-bg);
  color: var(--color-text);
  color-scheme: light;
}

/* Explicit dark island, useful inside a light region. */
.surface-dark {
  --color-bg: var(--brand-night);
  --color-bg-deep: #04060e;
  --color-surface-1: #0a1022;
  --color-surface-2: #0e1530;
  --color-surface-3: #141d3d;
  --color-surface-raised: #0c142b;

  --color-text: #f2f6ff;
  --color-text-soft: #c3cdf0;
  --color-text-muted: #94a2c8;
  --color-text-faint: #7482a8;

  --color-line: rgba(175, 198, 255, 0.14);
  --color-line-strong: rgba(175, 198, 255, 0.26);
  --color-line-accent: rgba(79, 216, 255, 0.5);

  --color-accent: var(--brand-lime);
  --color-accent-strong: #8be9ff;
  --color-accent-ink: #04101c;
  --color-focus: #4fd8ff;
  --color-selection-bg: #4fd8ff;
  --color-selection-text: #04101c;

  background-color: var(--color-bg);
  color: var(--color-text);
  color-scheme: dark;
}