/*
 * Potomitan Design Tokens — 2026-04-28 redesign (P19)
 * MDSTN (Madstone) Blackrock dark design system. Dark-only.
 *
 * Token names mirror the Pencil design variables (lower-kebab-case).
 * A legacy-alias block maps pre-P19 names onto the new tokens so
 * not-yet-migrated templates keep rendering. DO NOT drop the aliases
 * this cycle (P09/P11/P14 may land against them).
 *
 * For full styling documentation, see: ../STYLE_GUIDE.md
 */

:root {
  /* ==========================================
   * Accent & state palette (Pencil variables)
   * ========================================== */
  --accent:        #18C800;
  --accent-600:    #15A500;
  --accent-700:    #128200;
  --accent-glow:   rgba(24, 200, 0, 0.45);
  --signal:        #4A90E2;
  --signal-glow:   rgba(74, 144, 226, 0.45);
  --danger:        #D32F2F;
  --danger-glow:   rgba(211, 47, 47, 0.45);
  --warn:          #F59E0B;
  --warn-glow:     rgba(245, 158, 11, 0.45);

  /* ==========================================
   * Surfaces & lines
   * ========================================== */
  --bedrock:       #1E1E1E;
  --bedrock-card:  #1A1D24;
  --bedrock-deep:  #0F1117;
  --bedrock-row:   #232730;
  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.16);

  /* ==========================================
   * Text ramp
   * ========================================== */
  --txt-1:         #F1F5F9;
  --txt-2:         rgba(241, 245, 249, 0.78);
  --txt-3:         rgba(241, 245, 249, 0.55);
  --txt-4:         rgba(241, 245, 249, 0.38);
  /* Control text — foreground on filled accent/colour surfaces */
  --on-accent:     #000000;
  --on-color:      #FFFFFF;

  /* ==========================================
   * Type families
   * ========================================== */
  --font-display:  'Audiowide', 'Orbitron', sans-serif;
  --font-heading:  'Orbitron', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 'Menlo', 'Monaco', monospace;

  /* ==========================================
   * Spacing scale (Pencil)
   * ========================================== */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 14px;
  --gap-5: 18px;
  --gap-6: 24px;
  --gap-7: 32px;
  --pad-card: 18px;
  --pad-screen: 32px;
  --pad-screen-y: 28px;

  /* ==========================================
   * Radius scale (Pencil) — note: new values
   * ========================================== */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-full: 9999px;

  /* ==========================================
   * Letter spacing (Pencil)
   * ========================================== */
  --track-eyebrow: 0.16em;
  --track-heading: 0.12em;
  --track-wide:    0.08em;
  --track-normal:  0.02em;

  /* ==========================================
   * App shell metrics (unchanged structural tokens)
   * ========================================== */
  --sidebar-width: 220px;
  --topbar-height: 52px;

  /* ==========================================
   * Type scale / weights / line-heights (retained)
   * ========================================== */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Spacing scale (rem) — retained for utility classes */
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;

  /* Shadows / motion / z-index (retained) */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);

  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-duration-fast: var(--duration-200);
  --transition-duration-normal: var(--duration-300);
  --transition-duration-slow: 500ms;

  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}

/* ============================================================
 * LEGACY ALIASES (temporary — remove in a follow-up sweep once
 * every template is migrated off these names). DO NOT DROP NOW.
 * ============================================================ */
:root {
  --auth-page-bg:        var(--bedrock-deep);
  --auth-form-bg:        var(--bedrock-card);
  --auth-card-bg:        var(--bedrock-card);
  --auth-card-border:    var(--line);
  --auth-input-border:   var(--line-strong);
  --auth-card-radius:    var(--radius-xl);
  --auth-accent:         var(--accent);
  --auth-text-muted:     var(--txt-3);

  --sidebar-bg:          var(--bedrock);
  --sidebar-text:        var(--txt-3);
  --sidebar-text-active: var(--txt-1);
  --sidebar-active-bg:   var(--bedrock-row);
  --topbar-bg:           var(--bedrock-deep);
  --topbar-border:       var(--line);
  --app-content-bg:      var(--bedrock-deep);

  /* Brand core */
  --color-bedrock:       var(--bedrock);
  --color-cipher:        var(--accent);
  --color-signal:        var(--signal);

  /* Accent family → new accent */

  /* State pill / badge backgrounds (low-opacity tints) */
  --color-danger-100:  rgba(211, 47, 47, 0.16);
  --color-warn-100:    rgba(245, 158, 11, 0.16);
  --color-signal-100:  rgba(74, 144, 226, 0.16);
  --color-accent-50:  rgba(24, 200, 0, 0.10);
  --color-accent-100: rgba(24, 200, 0, 0.18);
  --color-accent-500: var(--accent);
  --color-accent-600: var(--accent-600);
  --color-accent-700: var(--accent-700);
  --color-accent-800: var(--accent-700);

  /* State families → new state tokens */
  --color-success-500: var(--accent);
  --color-success-600: var(--accent);
  --color-success-700: var(--accent-700);
  --color-error-500:   var(--danger);
  --color-error-600:   var(--danger);
  --color-error-700:   #B71C1C;
  --color-warning-500: var(--warn);
  --color-warning-600: var(--warn);
  --color-info-500:    var(--signal);
  --color-info-600:    var(--signal);

  /* Secondary family → signal */
  --color-secondary-500: var(--signal);
  --color-secondary-600: var(--signal);
  --color-secondary-700: #2D66AE;

  /* Primary family → bedrock surfaces */
  --color-primary-500: var(--bedrock-row);
  --color-primary-600: var(--bedrock);
  --color-primary-700: var(--bedrock);
  --color-primary-800: var(--bedrock);
  --color-primary-900: var(--bedrock-deep);

  /* Neutral ramp → dark surfaces / text (was light-mode) */
  --color-neutral-0:   var(--bedrock-deep);
  --color-neutral-50:  var(--bedrock-deep);
  --color-neutral-100: var(--bedrock-card);
  --color-neutral-150: var(--bedrock-row);
  --color-neutral-200: var(--bedrock-row);
  --color-neutral-300: var(--line-strong);
  --color-neutral-400: var(--txt-4);
  --color-neutral-500: var(--txt-3);
  --color-neutral-600: var(--txt-3);
  --color-neutral-700: var(--txt-2);
  --color-neutral-800: var(--txt-1);
  --color-neutral-900: var(--txt-1);
  --color-neutral-950: var(--txt-1);

  /* Type family aliases */
  --font-family-heading: var(--font-heading);
  --font-family-base:    var(--font-mono);
  --font-family-mono:    var(--font-mono);

  /* Letter-spacing legacy names */
  --letter-spacing-normal: var(--track-normal);
  --letter-spacing-wide:   var(--track-wide);
  --letter-spacing-wider:  var(--track-heading);
  --letter-spacing-widest: var(--track-eyebrow);
}

/* ==========================================
 * Body defaults — dark-only
 * ========================================== */
html, body {
  background: var(--bedrock-deep);
  color: var(--txt-1);
  font-family: var(--font-mono);
}

/* ==========================================
 * Base typography — recoloured for dark surface
 * Headings: Orbitron; body: JetBrains Mono
 * ========================================== */
.heading-1, h1 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--track-heading);
  color: var(--txt-1);
}

.heading-2, h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--track-heading);
  color: var(--txt-1);
}

.heading-3, h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--track-normal);
  color: var(--txt-1);
}

.heading-4, h4 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--txt-1);
}

.heading-5, h5 {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--txt-1);
}

.heading-6, h6 {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--txt-1);
}

.body-lg { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); }
.body    { font-size: var(--font-size-base); line-height: var(--line-height-normal); }
.body-sm { font-size: var(--font-size-sm); line-height: var(--line-height-normal); }
.body-xs { font-size: var(--font-size-xs); line-height: var(--line-height-tight); }

.caption {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--txt-3);
}

.overline {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--txt-3);
}

/* ==========================================
 * Text colour utilities — dark palette
 * ========================================== */
.text-primary   { color: var(--txt-1); }
.text-secondary { color: var(--signal); }
.text-success   { color: var(--accent); }
.text-error     { color: var(--danger); }
.text-warning   { color: var(--warn); }
.text-info      { color: var(--signal); }
.text-muted     { color: var(--txt-3); }
.text-subtle    { color: var(--txt-4); }
.text-accent    { color: var(--accent); }
.text-signal    { color: var(--signal); }

/* ==========================================
 * Background utilities — dark palette
 * ========================================== */
.bg-primary       { background-color: var(--bedrock); color: var(--txt-1); }
.bg-secondary     { background-color: var(--signal); color: #000; }
.bg-accent        { background-color: var(--accent); color: #000; }
.bg-accent-light  { background-color: var(--color-accent-100); color: var(--accent); }
.bg-bedrock       { background-color: var(--bedrock); color: var(--txt-1); }
.bg-card          { background-color: var(--bedrock-card); color: var(--txt-1); }
.bg-neutral       { background-color: var(--bedrock-card); color: var(--txt-1); }

.border-accent { border-color: var(--accent); }
.border-signal { border-color: var(--signal); }
.border-line   { border-color: var(--line); }

/* ==========================================
 * Focus rings — accent glow on dark
 * ========================================== */
.focus-ring { outline: 2px solid transparent; outline-offset: 2px; }
.focus-ring:focus-visible {
  outline-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.focus-ring-error:focus-visible {
  outline-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-glow);
}
.focus-ring-success:focus-visible {
  outline-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ==========================================
 * Misc utilities (retained)
 * ========================================== */
.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--transition-duration-normal);
}
.transition-fast { transition-duration: var(--transition-duration-fast); }
.transition-slow { transition-duration: var(--transition-duration-slow); }
.transition-none { transition: none; }

.gap-0 { gap: var(--spacing-0); }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }

.p-0 { padding: var(--spacing-0); }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

.m-0 { margin: var(--spacing-0); }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-6 { margin: var(--spacing-6); }
.m-8 { margin: var(--spacing-8); }