/* ==========================================================================
   Carbon Hosting design tokens (dark theme only)
   Source of truth: BRAND-KIT.md
   Implementation file: drop into the Laravel build (import once, globally).

   Token map (BRAND-KIT sections):
     fonts            -> section 4.1
     type scale       -> section 4.2 and 4.3
     canvas layers    -> section 3.1
     borders          -> section 3.2
     text ramp        -> section 3.3
     brand accents    -> section 3.4
     semantic colors  -> section 3.5
     tint equivalents -> section 3.6 (house rule: opaque blends, no literal tints)
     alpha forms      -> section 3.6 (scrims, glows, 8 digit hex)
     interactive      -> section 3.9
     spacing          -> section 5.1
     radius           -> section 5.2
     elevation        -> section 5.3
     motion           -> section 8
     component base   -> sections 5.4, 5.7 (drop in help only; components own detail)

   This file contains no light theme and no theme switch: the dark token set
   applies unconditionally (BRAND-KIT 3.10). There is no light surface token
   anywhere in this file by design. Tints of a near-white base are shipped as
   precomputed opaque hex blends, never as literal tint classes (house rule).
   ========================================================================== */

:root {
  /* SECTION 4.1: fonts (self hosted, SIL OFL 1.1: Chakra Petch, Inter,
     JetBrains Mono). Fallback stacks are system generic faces. */
  --font-display: 'Chakra Petch', 'Trebuchet MS', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

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

  --numeric-variant: tabular-nums;

  /* SECTION 4.2: type scale (size and line height pairs) */
  --fs-display-1: 60px;  --lh-display-1: 1.05;
  --fs-display-2: 48px;  --lh-display-2: 1.08;
  --fs-display-3: 38px;  --lh-display-3: 1.15;
  --fs-display-4: 30px;  --lh-display-4: 1.2;
  --fs-title-1:   24px;  --lh-title-1:   1.3;
  --fs-title-2:   20px;  --lh-title-2:   1.35;
  --fs-body-lg:   18px;  --lh-body:      1.6;
  --fs-body-base: 16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;  --lh-caption:   1.5;

  /* SECTION 4.2 and 4.3: tracking (uppercase display, micro labels) */
  --track-uppercase: 0.02em;
  --track-micro: 0.08em;

  /* SECTION 3.1: canvas layers. Graphite, one cool cast, no light layers. */
  --bg-base: #0C0F13;
  --bg-raised: #12161B;
  --bg-overlay: #171C22;
  --bg-modal: #1B2128;
  --surface-card: #13181E;
  --surface-sunken: #0A0D10;

  /* SECTION 3.2: border tiers. border-3 is the 3:1 form-control boundary. */
  --border-1: #242B33;
  --border-2: #343D47;
  --border-3: #5C6875;

  /* SECTION 3.3: text ramp. */
  --text-primary: #E9EDF2;
  --text-secondary: #AAB5C0;
  --text-muted: #829098;
  --text-disabled: #525C66;
  --text-on-accent: #0C0F13;

  /* SECTION 3.4: brand accents. Diamond Ember teal is primary, Ember is the
     disciplined highlight. Fills carry --text-on-accent text (verified). */
  --accent: #2FE5D0;
  --accent-hover: #63F0DF;
  --accent-active: #1CC9B6;
  --accent-2: #FF8A5C;
  --accent-2-hover: #FF9D78;
  --accent-2-active: #ED7240;

  /* SECTION 3.5: semantic colors. Always pair with labels or icons. */
  --success: #4ADE80;
  --warning: #FBBF24;
  --danger: #F87171;
  --info: #7AB2FF;

  /* SECTION 3.6: opaque tint equivalents (precomputed blends of a near-white
     wash over the listed surface; the recipe percentages live in BRAND-KIT
     3.6). Consume these in templates instead of any literal tint class. */
  --tint-hairline: #171B20;   /* 2 percent  over raised */
  --tint-soft: #1B1F24;       /* 4 percent  over raised */
  --tint-1: #202429;          /* 6 percent  over raised */
  --tint-2: #25292D;          /* 8 percent  over raised */
  --tint-3: #2A2D32;          /* 10 percent over raised: hover chips, row hover */
  --tint-4: #383B3F;          /* 16 percent over raised: pressed */
  --tint-5: #4B4E52;          /* 24 percent over raised: skeleton fills */
  --tint-base-1: #1B1D21;     /* 6 percent  over base */
  --tint-base-2: #24272B;     /* 10 percent over base */

  /* SECTION 3.6: accent and ember washes (opaque, over surface-card). */
  --accent-tint-1: #15282C;   /* quiet accent chip */
  --accent-tint-2: #163133;   /* accent chip default, selected rows */
  --accent-tint-3: #17393A;   /* accent chip hover; ember text maximum here */
  --accent-tint-4: #1A4949;   /* accent chip pressed; accent text 6.33:1 normal-safe; ember text 4.32:1 large only */
  --ember-tint-1: #2B2324;    /* ember chip fill */

  /* SECTION 3.6: alpha forms (8 digit hex), dark scope only. */
  --scrim-modal: #07090DD9;   /* 85 percent modal scrim */
  --scrim-drawer: #07090DC0;  /* 75 percent drawer scrim */
  --glow-accent-strong: #2FE5D03D;  /* 24 percent: CTA bloom, hero glow */
  --glow-accent-soft: #2FE5D01A;    /* 10 percent: ambient wash */
  --glow-ember-strong: #FF8A5C3D;   /* 24 percent: featured card edge */
  --glow-ember-soft: #FF8A5C1A;     /* 10 percent: ember ambient wash */

  /* SECTION 3.9: interactive states. Keyboard focus is never removed and the
     ring carries a 2px gap in the canvas tone, then accent. */
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
  --ring-danger: 0 0 0 1px #F8717166;

  /* SECTION 5.1: spacing scale, 4px base. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 48px;
  --space-10: 64px;
  --space-12: 96px;
  --measure-max: 72ch;
  --container-max: 1200px;

  /* SECTION 5.2: radius scale. Machined, not bubbly; pills only for chips. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* SECTION 5.3: elevation on dark (shadow color #04060A at rising alphas)
     plus the accent bloom (trace: 32px hover glow, BRAND-KIT 5.3). */
  --shadow-sm: 0 1px 2px #04060A80;
  --shadow-md: 0 4px 12px #04060A99;
  --shadow-lg: 0 8px 24px #04060AAB;
  --shadow-xl: 0 16px 48px #04060AC0;
  --bloom-accent: 0 0 32px var(--glow-accent-strong);

  /* SECTION 8: motion tokens. Restrained, meaning carrying, transform and
     opacity only; reduced motion collapses all of it (media query below). */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Stacking order (sticky, drawer, modal, toast). */
  --z-raised: 10;
  --z-sticky: 100;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Render native UI chrome dark: scrollbars, autofill, form widgets. */
  color-scheme: dark;
}

/* Guard: a light preference never flips the product. The declaration is
   intentionally a re assertion, not a theme (BRAND-KIT 3.10). */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: dark;
  }
}

/* Base application (drop in help: components own their detailed styling). */
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-body-base);
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-family: var(--font-display);
  transition: color var(--dur-base) var(--ease-out);
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent-hover);
}

::selection {
  background: var(--accent-tint-3);
  color: var(--text-primary);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* SECTION 5.7: form controls are always themed, dark fills only. Height and
   hit minimums per BRAND-KIT 0.1.5 and 5.4. */
input, select, textarea {
  background: var(--surface-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body-base);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out);
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

input:hover, select:hover, textarea:hover {
  border-color: var(--border-2);
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

/* Autofill must never repaint a light fill: themed dark override. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-sunken) inset;
  caret-color: var(--text-primary);
  transition: background-color 9999s ease-out 0s;
}

/* SECTION 8: reduced motion is a hard gate: transforms and glows collapse. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}