/* ============================================================================
   Ryvem — design tokens
   Dark is the default. Light applies two ways, exactly like the graphdoc UI:
     1. automatically via  @media (prefers-color-scheme: light)
     2. manually via       :root[data-theme="light"]   (the toggle, persisted)
   The [data-theme] attribute selectors carry higher specificity than the media
   block, so a manual choice always wins over the OS preference.
   One brand accent gradient (blue -> violet -> teal). Used sparingly:
   the logo mark, one hero glow, one hairline. Never on numbers or body text.
   ============================================================================ */

:root {
  /* ---- surfaces & ink (dark, default) ---------------------------------- */
  --bg:          #0b0e14;
  --bg-soft:     #141922;
  --surface:     #10141c;   /* cards, panels, code */
  --surface-2:   #161c26;   /* raised / hover */
  --border:      #232a36;
  --border-soft: #1b2130;
  --text:        #e6edf3;
  --muted:       #8b98a9;
  --faint:       #7a8493;   /* captions, meta — AA on dark surfaces */
  --accent:      #6cb0ff;
  --accent-strong: #8cc2ff;
  --accent-ink:  #06101f;   /* text on a solid accent fill */
  --accent-soft: #2b6fdb2e;
  --code-bg:     #1a2029;
  --shadow:      rgba(0,0,0,.55);
  --glass:       rgba(16,20,28,.72);

  /* status inks (reserved — never reused as an accent) */
  --ok:    #4be0c0;
  --warn:  #d6a626;

  /* ---- the one brand gradient ----------------------------------------- */
  --grad-1: #6cb0ff;
  --grad-2: #a479ff;
  --grad-3: #4be0c0;
  --grad-ink: #06101f;   /* dark ink for text on the gradient fill; theme-independent */
  --gradient:      conic-gradient(from 210deg, var(--grad-1), var(--grad-2), var(--grad-3), var(--grad-1));
  --gradient-line: linear-gradient(115deg, var(--grad-1), var(--grad-2) 52%, var(--grad-3));

  /* ---- syntax highlighting (dark) -------------------------------------
     Restrained, professional. Every value clears WCAG 4.5:1 against the code
     surface (--code-bg #1a2029): comment 5.1, punct 5.6, keyword 6.2, key 7.2,
     flag 7.4, number 8.4, string 8.0. Comments are muted italic; strings a
     calm teal-green; keys/commands a soft brand blue; numbers amber; booleans
     & null a soft violet; flags a subtle gold; punctuation muted. */
  --tok-comment: #8591a1;
  --tok-string:  #57c795;
  --tok-number:  #e3b341;
  --tok-keyword: #b18aff;
  --tok-key:     #6cb0ff;
  --tok-flag:    #d3a765;
  --tok-punct:   #8b98a9;

  /* ---- type ------------------------------------------------------------ */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;  /* 15 — body */
  --fs-md:   1.0625rem;  /* 17 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.5rem;     /* 24 */
  --fs-2xl:  2rem;       /* 32 */
  --fs-3xl:  2.75rem;    /* 44 */
  --fs-stat: 3rem;       /* 48 — stat-tile value (the display minimum) */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   680;

  /* ---- spacing (4px base) --------------------------------------------- */
  --sp-1: 0.25rem;   /*  4 */
  --sp-2: 0.5rem;    /*  8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 3rem;      /* 48 */
  --sp-8: 4rem;      /* 64 */
  --sp-9: 6rem;      /* 96 */

  /* ---- radii ----------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:   9px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  22px;
  --r-pill: 999px;

  /* ---- shadows --------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.25);
  --shadow-md:   0 10px 34px var(--shadow);
  --shadow-lg:   0 24px 60px var(--shadow);
  --shadow-glow: 0 0 14px rgba(108,176,255,.42);

  /* ---- layout ---------------------------------------------------------- */
  --container:        1120px;
  --container-narrow: 800px;
  --nav-h:            60px;
  --sidebar-w:        264px;

  /* ---- motion ---------------------------------------------------------- */
  --t-fast: .12s;
  --t:      .18s;
  --ease:   cubic-bezier(.4, 0, .2, 1);

  /* ---- z-index --------------------------------------------------------- */
  --z-nav:     50;
  --z-overlay: 80;
  --z-menu:    90;

  color-scheme: dark light;
}

/* ---- light palette values, shared by the auto + manual triggers -------- */
:root[data-theme="light"] {
  --bg:          #f4f6fa;
  --bg-soft:     #ffffff;
  --surface:     #ffffff;
  --surface-2:   #eef1f7;
  --border:      #dce1e8;
  --border-soft: #e7ebf1;
  --text:        #1a1f28;
  --muted:       #5b6572;
  --faint:       #687280;
  --accent:      #1668d8;
  --accent-strong: #0f56bd;
  --accent-ink:  #ffffff;
  --accent-soft: #1668d81f;
  --code-bg:     #eef1f6;
  --shadow:      rgba(120,130,145,.28);
  --glass:       rgba(255,255,255,.80);
  --ok:    #12876f;
  --warn:  #a9791a;
  --shadow-glow: 0 0 14px rgba(22,104,216,.28);

  /* syntax highlighting (light) — every value clears 4.5:1 against the light
     code surface (--code-bg #eef1f6): key 4.6, number 4.75, comment 5.2,
     flag 5.2, string 5.4, keyword 5.9, punct 5.0. */
  --tok-comment: #5b6572;
  --tok-string:  #0e7049;
  --tok-number:  #8a6410;
  --tok-keyword: #6f34d9;
  --tok-key:     #1668d8;
  --tok-flag:    #8a5a12;
  --tok-punct:   #5f6878;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:          #f4f6fa;
    --bg-soft:     #ffffff;
    --surface:     #ffffff;
    --surface-2:   #eef1f7;
    --border:      #dce1e8;
    --border-soft: #e7ebf1;
    --text:        #1a1f28;
    --muted:       #5b6572;
    --faint:       #687280;
    --accent:      #1668d8;
    --accent-strong: #0f56bd;
    --accent-ink:  #ffffff;
    --accent-soft: #1668d81f;
    --code-bg:     #eef1f6;
    --shadow:      rgba(120,130,145,.28);
    --glass:       rgba(255,255,255,.80);
    --ok:    #12876f;
    --warn:  #a9791a;
    --shadow-glow: 0 0 14px rgba(22,104,216,.28);
    --tok-comment: #5b6572;
    --tok-string:  #0e7049;
    --tok-number:  #8a6410;
    --tok-keyword: #6f34d9;
    --tok-key:     #1668d8;
    --tok-flag:    #8a5a12;
    --tok-punct:   #5f6878;
  }
}