/* Design tokens — the shared design code (reused by the future landing).
   iOS-26 minimalist glass: near-white, near-black, gray scale, one accent. */
:root {
  color-scheme: light;
  /* palette */
  --bg:        #f4f5f7;
  --ink:       #14151a;
  /* Full scale, no gaps. Roles: 100-200 surfaces, 300-400 borders and decorative
     marks, 500+ TEXT. Every value used for text is checked against the glass
     surface it sits on (#fbfbfc): 500 = 4.96:1, 600 = 6.7:1, 700 = 7.8:1 — all
     past WCAG AA 4.5:1. The old 500 (#8b919c) measured 3.06:1 and was used for
     real content (a step's workflow name, breadcrumbs); that is a fail, not a
     stylistic choice. */
  --gray-100:  #eceef1;
  --gray-200:  #dfe2e7;
  --gray-300:  #c7ccd4;
  --gray-400:  #aeb4be;
  --gray-500:  #686e79;
  --gray-600:  #585e68;
  --gray-700:  #4b5059;
  --gray-800:  #2c3038;
  --accent:    #2563eb;              /* fills, borders, marks */
  --accent-weak: rgba(37, 99, 235, .14);
  /* TEXT on an --accent-weak chip. The plain accent measures 4.13:1 there and
     fails AA — and it is used for the active nav item and dependency chips, i.e.
     for words people read, not decoration. */
  --accent-ink: #1d4fd8;
  /* Same story for status text on its own tinted badge. Measured on the composited
     badge background: --ok 2.74:1, --err 3.87:1, --warn 2.67:1 — all fail AA, and a
     run's status is the single most-read piece of state in the app. The -ink values
     are 5.2 / 5.2 / 5.2. Fills, dots and borders keep using the plain colours. */
  --ok-ink:    #0f6f32;
  --err-ink:   #b91c1c;
  --warn-ink:  #9a4a08;
  --ok:        #16a34a;
  --err:       #dc2626;
  --warn:      #d97706;
  --warn-weak: rgba(217, 119, 6, .14);
  --surface-solid: #ffffff;                  /* opaque surface (reduced-transparency fallback) */
  --surface-chip:  rgba(255, 255, 255, .6);  /* raised chip inside a glass panel */
  --on-accent:     #ffffff;                  /* text ON an --accent fill */
  --glow:          rgba(255, 255, 255, .9);  /* soft top-left background glow */

  /* glass recipe */
  --glass-bg:     rgba(255, 255, 255, .62);
  --glass-border: rgba(255, 255, 255, .75);
  --glass-blur:   18px;
  --glass-sat:    160%;

  /* scales */
  /* One source for the sidebar width: it also drives the canvas padding and the
     floating header's offset, and those were three copies of the same 216px. The
     catalog is a tree now, so it needs the extra room — a truncated workflow name
     is the primary identifier being hidden. */
  --sidebar-w: 248px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --space-1: .35rem;
  --space-2: .6rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --shadow-sm: 0 1px 2px rgba(20, 21, 26, .06);
  --shadow-md: 0 6px 24px rgba(20, 21, 26, .10);
  --shadow-lg: 0 18px 50px rgba(20, 21, 26, .16);
  --text-sm: .85rem;
  --text-md: 1rem;
  --text-lg: 1.3rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Dark theme — follows the OS appearance (macOS auto-dark in the evening). Only
   the palette/glass/shadow tokens flip; every component reads these, so the whole
   UI adapts. The gray scale keeps its ROLE (100 = darkest surface … 700 = lightest
   text), just inverted in value. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:        #0f1116;
    --ink:       #e9ebef;
    --gray-100:  #1a1d24;   /* darkest surface */
    --gray-200:  #2a2e38;   /* borders */
    --gray-300:  #3b414d;   /* strong borders / connector lines */
    --gray-400:  #5c6470;   /* decorative marks */
    --gray-500:  #9aa1ad;   /* secondary text — 5.50:1 on the dark glass surface */
    --gray-600:  #b4bac4;   /* secondary text, stronger */
    --gray-700:  #cbd0d8;   /* primary text */
    --gray-800:  #e2e6ec;   /* long-form body copy */
    --accent:      #5b8cf5;
    --accent-weak: rgba(91, 140, 245, .20);
    --accent-ink:  #7ba4f8;   /* 5.25:1 on the dark accent-weak chip */
    /* On dark the tinted badges already clear AA (6.7 / 5.1 / 6.0), so ink == base. */
    --ok-ink:      #34d17f;
    --err-ink:     #f26d6d;
    --warn-ink:    #f0a53a;
    --ok:        #34d17f;
    --err:       #f26d6d;
    --warn:      #f0a53a;
    --warn-weak: rgba(240, 165, 58, .18);
    --surface-solid: #1a1d24;
    /* A literal rgba(255,255,255,.6) chip stayed near-white in the dark theme and put
       light text on a light surface (2.0:1). Tokenised so it flips with everything else. */
    --surface-chip:  rgba(255, 255, 255, .06);
    /* The accent lightens on dark, so white on it drops to 3.22:1 — ink goes dark. */
    --on-accent:     #0f1116;
    --glow:          rgba(90, 120, 180, .10);

    --glass-bg:     rgba(28, 32, 40, .62);
    --glass-border: rgba(255, 255, 255, .10);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);
  }
}