/* Design tokens — values from @atlaskit/tokens 16.10.0 (Apache-2.0), see docs/superpowers/specs/2026-08-30-confluence-reference.md */
:root {
  /* text / link */
  --c-text: #292A2E;
  --c-text-subtle: #505258;
  --c-text-subtlest: #6B6E76;
  --c-link: #1868DB;
  --c-link-pressed: #1558BC;

  /* surfaces / borders */
  --c-surface: #FFFFFF;
  --c-surface-sunken: #F8F8F8;
  --c-surface-raised: #FFFFFF;
  --c-surface-overlay: #FFFFFF;
  --c-surface-hover: #F0F1F2;
  --c-border: #DDDEE1;
  --c-border-bold: #7D818A;
  --c-neutral: #0515240F;
  --c-selected: #E9F2FE;
  --c-selected-text: #1558BC;

  /* semantic: bg / icon / text */
  --c-info-bg: #E9F2FE;    --c-info: #357DE8;    --c-info-text: #1558BC;
  --c-note-bg: #F8EEFE;    --c-note: #AF59E1;    --c-note-text: #803FA5;
  --c-success-bg: #EFFFD6; --c-success: #6A9A23; --c-success-text: #4C6B1F;
  --c-warning-bg: #FFF5DB; --c-warning: #E06C00; --c-warning-text: #9E4C00;
  --c-danger-bg: #FFECEB;  --c-danger: #E2483D;  --c-danger-text: #AE2E24;

  /* accents (text colour + lozenge bg) */
  --c-accent-blue: #1558BC;   --c-accent-blue-bg: #CFE1FD;   --c-accent-blue-bold: #1868DB;
  --c-accent-green: #216E4E;  --c-accent-green-bg: #BAF3DB;  --c-accent-green-bold: #1F845A;
  --c-accent-red: #AE2E24;    --c-accent-red-bg: #FFD5D2;    --c-accent-red-bold: #C9372C;
  --c-accent-yellow: #7F5F01; --c-accent-yellow-bg: #F5E989; --c-accent-yellow-bold: #946F00;
  --c-accent-purple: #803FA5; --c-accent-purple-bg: #EED7FC; --c-accent-purple-bold: #964AC0;
  --c-accent-gray: #505258;   --c-accent-gray-bg: #DDDEE1;   --c-accent-gray-bold: #6B6E76;

  /* code */
  --c-code-bg: #F0F1F2;
  --c-code-gutter: rgba(5, 21, 36, .06);
  --c-highlight: #FBC828;

  /* spacing / radius */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 12px;

  /* typography */
  --fs-body: 16px; --lh-body: 1.714;
  --fs-h1: 27.4px; --fs-h2: 22.9px; --fs-h3: 18.3px; --fs-h4: 16px; --fw-heading: 600;
  --lh-h1: 32px; --lh-h2: 27.5px; --lh-h3: 27.4px; --lh-h4: 20px;
  --fs-ui: 14px; --lh-ui: 20px; --fs-small: 12px; --fs-code: 14px;
  /* Pretendard draws Korean and Latin on one rhythm; docs.css and control-panel.css
     each wrote their own mono stack, so both families are named here now. */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, "Segoe UI Mono", monospace;

  /* elevation */
  --sh-raised: 0 1px 1px rgba(30, 31, 33, .25), 0 0 1px rgba(30, 31, 33, .31);
  --sh-overlay: 0 8px 12px rgba(30, 31, 33, .15), 0 0 1px rgba(30, 31, 33, .31);

  /* layout */
  --w-content:840px; --w-tree: 330px; --h-topbar:64px; --w-panel: 320px;
  /* one height and one radius for every bar control, so rows of them line up */
  --h-ctl:32px; --h-ctl-inner:26px; --r-ctl:10px; --r-ctl-inner:7px;
  /* base.css declared this same 4/6/8/12 scale again as --radius-sm/md/lg/xl;
     those now alias these. --r-pill replaces the 99px / 999px / 50px trio. */
  --r-xs:3px; --r-5:20px; --r-pill:999px;
  /* three motion speeds; the sheets had ten, from .1s to .3s, spelled both ways */
  --d-fast:.15s; --d-base:.2s; --d-slow:.3s;

  /* Surface palette (the Toss-flavoured greys and blue used by the shell, tree and
     post list). It lived in app-surface.css and was duplicated again in tree.css as
     --t-*; both now point here so there is one place to change a colour. */
  --s-ease:cubic-bezier(.2,.8,.2,1);
  --s-lift:0 8px 20px rgba(9,30,66,.12); --s-rest:0 1px 2px rgba(9,30,66,.08);
  --s-blue:#3182F6; --s-blue-bg:#E8F3FF; --s-row:#F2F4F6; --s-line:#E9ECEF;
  --s-text:#333D4B; --s-sub:#6B7684; --s-faint:#8B95A1;
}

/* The reading column grows on wide screens rather than leaving a dead gap beside the tree:
   at 1882px the old fixed 840px left 462px of empty space with the text squeezed to 792px. */
@media (min-width:1500px){ :root{ --w-content:960px } }
@media (min-width:1800px){ :root{ --w-content:1060px } }
@media (min-width:2200px){ :root{ --w-content:1160px } }

body.dark-mode {
  --c-text: #CECFD2;
  --c-text-subtle: #A9ABAF;
  --c-text-subtlest: #96999E;
  --c-link: #669DF1;
  --c-link-pressed: #8FB8F6;

  --c-surface: #1F1F21;
  --c-surface-sunken: #18191A;
  --c-surface-raised: #242528;
  --c-surface-overlay: #2B2C2F;
  --c-surface-hover: #242528;
  --c-border: #4B4D51;
  --c-border-bold: #7E8188;
  --c-neutral: #CECED912;
  --c-selected: #1C2B42;
  --c-selected-text: #8FB8F6;

  --c-info-bg: #1C2B42;    --c-info: #4688EC;    --c-info-text: #8FB8F6;
  --c-note-bg: #35243F;    --c-note: #BF63F3;    --c-note-text: #D8A0F7;
  --c-success-bg: #28311B; --c-success: #82B536; --c-success-text: #B3DF72;
  --c-warning-bg: #3A2C1F; --c-warning: #FBC828; --c-warning-text: #FBC828;
  --c-danger-bg: #42221F;  --c-danger: #F15B50;  --c-danger-text: #FD9891;

  --c-accent-blue: #8FB8F6;   --c-accent-blue-bg: #123263;   --c-accent-blue-bold: #669DF1;
  --c-accent-green: #7EE2B8;  --c-accent-green-bg: #164B35;  --c-accent-green-bold: #4BCE97;
  --c-accent-red: #FD9891;    --c-accent-red-bg: #5D1F1A;    --c-accent-red-bold: #F87168;
  --c-accent-yellow: #EED12B; --c-accent-yellow-bg: #533F04; --c-accent-yellow-bold: #DDB30E;
  --c-accent-purple: #D8A0F7; --c-accent-purple-bg: #48245D; --c-accent-purple-bold: #C97CF4;
  --c-accent-gray: #A9ABAF;   --c-accent-gray-bg: #4B4D51;   --c-accent-gray-bold: #96999E;

  --c-code-bg: #242528;
  --c-code-gutter: rgba(255, 255, 255, .06);
  --c-highlight: #946F00;

  --sh-raised: 0 1px 1px rgba(1, 4, 4, .5), 0 0 1px rgba(1, 4, 4, .5);
  --sh-overlay: 0 0 0 1px rgba(189, 189, 189, .12), 0 8px 12px rgba(1, 4, 4, .36), 0 0 1px 1px rgba(1, 4, 4, .5);
}