/**
 * MyronCMS — Token CSS Emission Layer
 * Source: app/jsonm/baselines/apollo-v0.1.0.jsonm
 * Legacy lineage: myron.tokens.defaults.v1.json5 v1.0.0
 * Release identity is governed by app/assets/runtime/js/release-shell.js.
 *
 * This file is the baseline emission layer for the canonical day-1 corpus.
 * All values emitted verbatim from the canonical baseline style definition.
 * Aliases reference scale steps via var() — no duplicated hard values.
 *
 * Naming convention: --myron-{category}-{key}
 * Geometry: base-8 primary · base-4 half-step permitted where noted
 */

:root {

  /* ================================================================
     SPACE — tokens.space
     Invariant: geom.base8 enforced on scalePx.*
     ✓ = base-8  ~ = half-step (base-4)
     ================================================================ */

  /* Scale */
  --myron-space-s0:   0px;    /* ✓ zero    */
  --myron-space-s0_5: 4px;    /* ~ half-step */
  --myron-space-s1:   8px;    /* ✓ base-8  */
  --myron-space-s1_5: 12px;   /* ~ half-step */
  --myron-space-s2:   16px;   /* ✓ base-8  */
  --myron-space-s3:   24px;   /* ✓ base-8  */
  --myron-space-s4:   32px;   /* ✓ base-8  */
  --myron-space-s5:   40px;   /* ✓ base-8  */
  --myron-space-s6:   48px;   /* ✓ base-8  */
  --myron-space-s7:   56px;   /* ✓ base-8  */
  --myron-space-s8:   64px;   /* ✓ base-8  */
  --myron-space-s9:   72px;   /* ✓ base-8  */
  --myron-space-s10:  80px;   /* ✓ base-8  */
  --myron-space-s12:  96px;   /* ✓ base-8  */

  /* Aliases → reference scale via var() */
  --myron-space-none: var(--myron-space-s0);
  --myron-space-xs:   var(--myron-space-s0_5);
  --myron-space-sm:   var(--myron-space-s1);
  --myron-space-md:   var(--myron-space-s2);
  --myron-space-lg:   var(--myron-space-s3);
  --myron-space-xl:   var(--myron-space-s4);
  --myron-space-2xl:  var(--myron-space-s6);


  /* ================================================================
     SIZE — tokens.size
     ================================================================ */

  /* Control heights — all base-8 ✓ */
  --myron-size-control-sm: 32px;   /* ✓ base-8 */
  --myron-size-control-md: 40px;   /* ✓ base-8 */
  --myron-size-control-lg: 48px;   /* ✓ base-8 */

  /* Icon sizes */
  --myron-size-icon-sm: 16px;      /* ✓ base-8 */
  --myron-size-icon-md: 20px;      /* ~ half-step */
  --myron-size-icon-lg: 24px;      /* ✓ base-8 */

  /* Hit target minimum */
  --myron-size-hit-target-min: 40px; /* ✓ base-8 */


  /* ================================================================
     RADIUS — tokens.radius
     Invariant: geom.halfStepOnly enforced on scalePx.*
     ================================================================ */

  /* Scale */
  --myron-radius-r0:   0px;   /* ✓ zero    */
  --myron-radius-r0_5: 4px;   /* ~ half-step */
  --myron-radius-r1:   8px;   /* ✓ base-8  */
  --myron-radius-r2:   16px;  /* ✓ base-8  */

  /* Aliases */
  --myron-radius-none: var(--myron-radius-r0);
  --myron-radius-sm:   var(--myron-radius-r0_5);
  --myron-radius-md:   var(--myron-radius-r1);
  --myron-radius-lg:   var(--myron-radius-r2);
  --myron-radius-pill: 9999px;


  /* ================================================================
     BORDER — tokens.border
     ================================================================ */

  --myron-border-hairline: 1px;
  --myron-border-thin:     2px;


  /* ================================================================
     TYPOGRAPHY — tokens.typography
     Note: font sizes exempt from geom.base8 (typographic scale)
     ================================================================ */

  /* Font families */
  --myron-typography-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --myron-typography-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Font weights */
  --myron-typography-weight-regular:  400;
  --myron-typography-weight-medium:   500;
  --myron-typography-weight-semibold: 600;
  --myron-typography-weight-bold:     700;

  /* Font sizes (typographic scale — exempt from geom.base8) */
  --myron-typography-size-xs:  12px;
  --myron-typography-size-sm:  14px;
  --myron-typography-size-md:  16px;
  --myron-typography-size-lg:  18px;
  --myron-typography-size-xl:  20px;
  --myron-typography-size-2xl: 24px;
  --myron-typography-size-3xl: 32px;

  /* Line heights (unitless) */
  --myron-typography-line-tight:  1.2;
  --myron-typography-line-normal: 1.5;
  --myron-typography-line-loose:  1.7;

  /* Letter spacing (em) */
  --myron-typography-tracking-normal: 0em;
  --myron-typography-tracking-tight:  -0.01em;
  --myron-typography-tracking-wide:   0.02em;


  /* ================================================================
     COLOR — tokens.color.semantic
     Day-1: semantic slots only. 18 required slots.
     ================================================================ */

  --myron-color-bg:           #ffffff;
  --myron-color-surface:      #ffffff;
  --myron-color-surface-alt:  #f6f7f8;

  --myron-color-text:         #111111;
  --myron-color-text-muted:   #444444;

  --myron-color-border:       #d0d4d8;
  --myron-color-border-strong:#a7adb4;

  --myron-color-focus:        #1a73e8;
  --myron-color-link:         #1a73e8;
  --myron-color-link-hover:   #1558b0;

  --myron-color-accent:       #111111;   /* neutral by default */
  --myron-color-accent-text:  #ffffff;

  --myron-color-danger:       #b00020;
  --myron-color-danger-text:  #ffffff;

  --myron-color-success:      #0a7a3a;
  --myron-color-success-text: #ffffff;

  --myron-color-warning:      #8a5b00;
  --myron-color-warning-text: #ffffff;

  /* Deterministic tone variants for governed component surfaces/borders */
  --myron-color-link-surface-subtle:      rgba(26, 115, 232, 0.06);
  --myron-color-link-surface-soft:        rgba(26, 115, 232, 0.10);
  --myron-color-link-surface-soft-strong: rgba(26, 115, 232, 0.12);
  --myron-color-link-border-soft:         rgba(26, 115, 232, 0.30);

  --myron-color-success-surface-subtle:      rgba(10, 122, 58, 0.06);
  --myron-color-success-surface-soft:        rgba(10, 122, 58, 0.10);
  --myron-color-success-surface-soft-strong: rgba(10, 122, 58, 0.12);
  --myron-color-success-border-soft:         rgba(10, 122, 58, 0.30);
  --myron-color-success-border-soft-strong:  rgba(10, 122, 58, 0.40);

  --myron-color-warning-surface-soft:        rgba(138, 91, 0, 0.10);
  --myron-color-warning-surface-soft-strong: rgba(138, 91, 0, 0.12);
  --myron-color-warning-border-soft:         rgba(138, 91, 0, 0.30);
  --myron-color-warning-border-soft-strong:  rgba(138, 91, 0, 0.40);

  --myron-color-danger-surface-subtle:      rgba(176, 0, 32, 0.06);
  --myron-color-danger-surface-soft:        rgba(176, 0, 32, 0.10);
  --myron-color-danger-surface-soft-strong: rgba(176, 0, 32, 0.12);
  --myron-color-danger-border-soft:         rgba(176, 0, 32, 0.30);
  --myron-color-danger-border-soft-strong:  rgba(176, 0, 32, 0.40);

  --myron-color-accent-surface-subtlest:   rgba(17, 17, 17, 0.04);
  --myron-color-accent-surface-subtle:     rgba(17, 17, 17, 0.06);
  --myron-color-accent-surface-soft:       rgba(17, 17, 17, 0.08);
  --myron-color-accent-surface-emphasis:   rgba(17, 17, 17, 0.10);
  --myron-color-accent-border-soft:        rgba(17, 17, 17, 0.30);

  --myron-color-text-overlay: #00000066;
  --myron-color-danger-hover: #9e001d;


  /* ================================================================
     SHADOW — tokens.shadow
     ================================================================ */

  --myron-shadow-none: none;
  --myron-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.08);
  --myron-shadow-md:   0 2px 6px rgba(0, 0, 0, 0.10);


  /* ================================================================
     MOTION — tokens.motion
     ================================================================ */

  --myron-motion-duration-none:   0ms;
  --myron-motion-duration-fast:   120ms;
  --myron-motion-duration-normal: 180ms;
  --myron-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);


  /* ================================================================
     LAYOUT — tokens.layout
     All values base-8 ✓
     ================================================================ */

  /* Container max widths */
  --myron-layout-container-sm: 720px;   /* ✓ base-8: 90×8 */
  --myron-layout-container-md: 960px;   /* ✓ base-8: 120×8 */
  --myron-layout-container-lg: 1120px;  /* ✓ base-8: 140×8 */

  /* Gutters */
  --myron-layout-gutter-sm: 16px;  /* ✓ base-8 */
  --myron-layout-gutter-md: 24px;  /* ✓ base-8 */
  --myron-layout-gutter-lg: 32px;  /* ✓ base-8 */

  /* Breakpoints */
  --myron-layout-breakpoint-sm: 640px;  /* ✓ base-8: 80×8 */
  --myron-layout-breakpoint-md: 960px;  /* ✓ base-8: 120×8 */
  --myron-layout-breakpoint-lg: 1200px; /* ✓ base-8: 150×8 */


  /* ================================================================
     FOCUS — tokens.focus
     ================================================================ */

  --myron-focus-ring-width:   2px;
  --myron-focus-ring-offset:  2px;
  --myron-focus-outline-style: solid;


  /* ================================================================
     Z-INDEX — tokens.zIndex
     ================================================================ */

  --myron-z-base:     0;
  --myron-z-dropdown: 10;
  --myron-z-overlay:  20;
  --myron-z-modal:    30;
  --myron-z-toast:    40;

}