/* ================================================================== */
/* 1. TOKENS                                                           */
/* ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Fonts */
  --font-body: 'Source Serif 4', Charter, Georgia, serif;
  --font-ui:   'Source Sans 3', -apple-system, system-ui, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  /* Neutrals */
  --c-text:          #263241;
  --c-text-dim:      #465568;
  --c-text-muted:    #6f7c8f;
  --c-border:        #d8e0ea;
  --c-border-strong: #c5cfdb;
  --c-surface:       #ffffff;
  --c-surface-soft:  #f7f9fb;
  --c-surface-hover: #eef3f7;

  /* Brand */
  --c-link:         #4c6f9d;
  --c-link-deep:    #395a83;
  --c-error:        #9f4a4a;
  --c-error-bg:     #fbf1f1;
  --c-error-border: #e8c4c4;
  --c-success:      #3f7a5b;
  --c-success-text: #35684e;
  --c-success-bg:   #eff7f2;
  --c-warning:      #9a6a28;
  --c-warning-bg:   #fbf6e8;
  --c-warning-border: #e6c978;
  --c-warning-text: #7a531f;

  /* Info panels (forward compose) */
  --c-info-bg:     #eef4fb;

  /* Transparencies, shadows, and modal overlays */
  --c-backdrop: rgba(0, 0, 0, 0.35);
  --c-shadow-panel: rgba(38, 50, 65, 0.04);
  --c-shadow-bar: rgba(38, 50, 65, 0.05);
  --c-shadow-overlay: rgba(38, 50, 65, 0.14);
  --c-brand-shadow: rgba(76, 111, 157, 0.10);
  --c-brand-ring: rgba(76, 111, 157, 0.16);
  --c-brand-ring-strong: rgba(76, 111, 157, 0.24);
  --c-brand-ring-soft: rgba(76, 111, 157, 0.12);
  --c-tooltip-shadow: rgba(0,0,0,0.08);
  --c-transparent-surface: rgba(247, 249, 251, 0);
  --c-glass-surface: rgba(255,255,255,0.82);
  /* Status palette — one hue per semantic meaning (see § 4c) */
  --status-blue-bg:   var(--c-info-bg); --status-blue-fg:   #3d5f8a;
  --status-purple-bg: #f1f1fa; --status-purple-fg: #5b5f86;
  --status-amber-bg:  var(--c-warning-bg); --status-amber-fg:  var(--c-warning-text); --status-amber-border: var(--c-warning-border);
  --status-green-bg:  var(--c-success-bg); --status-green-fg:  var(--c-success-text);
  --status-red-bg:    var(--c-error-bg); --status-red-fg:    var(--c-error);
  --status-gray-bg:   var(--c-surface-hover); --status-gray-fg:   var(--c-text-muted);

  /* Radii */
  --radius-xs:   1px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-field: 7px;
  --radius-card:  8px;
  --radius-xl:   10px;
  --radius-round: 50%;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(38, 50, 65, 0.09);
  --shadow-md: 0 4px 12px rgba(38, 50, 65, 0.12);
  --shadow-panel: 0 4px 14px var(--c-shadow-panel);
  --shadow-tabbar: 0 1px 2px var(--c-shadow-bar);
  --shadow-selected: 0 0 0 1px var(--c-link), 0 10px 30px var(--c-brand-shadow);

  /* Spacing scale — 4px grid with half-steps for dense dashboard controls */
  --sp-0-25: 0.0625rem; /*  1px */
  --sp-0-5:  0.125rem;  /*  2px */
  --sp-0-75: 0.1875rem; /*  3px */
  --sp-1:  0.25rem;   /*  4px */
  --sp-1-25: 0.3125rem; /* 5px */
  --sp-1-5: 0.375rem;   /* 6px */
  --sp-1-75: 0.4375rem; /* 7px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-2-25: 0.5625rem; /* 9px */
  --sp-2-5:  0.625rem;  /* 10px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-3-25: 0.8125rem; /* 13px */
  --sp-3-5:  0.875rem;  /* 14px */
  --sp-4:  1rem;      /* 16px */
  --sp-4-25: 1.0625rem; /* 17px */
  --sp-4-5:  1.125rem;  /* 18px */
  --sp-4-75: 1.1875rem; /* 19px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-5-5:  1.375rem;  /* 22px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-6-5:  1.625rem;  /* 26px */
  --sp-6-75: 1.875rem;  /* 30px */
  --sp-7:  2rem;      /* 32px */
  --sp-8:  2.5rem;    /* 40px */
  --sp-9:  3rem;      /* 48px */
  --sp-10: 4rem;      /* 64px */
  --sp-11: 4.5rem;     /* 72px */
  --sp-12: 5rem;       /* 80px */

  /* Type scale */
  --fs-xs:   0.75rem;   /* badges, timestamps, dev chrome */
  --fs-sm:   0.875rem;  /* secondary metadata, hints, dates */
  --fs-base: 1rem;      /* inputs, primary buttons, message bodies */
  --fs-lg:   1.125rem;  /* section headings, emphasized body */
  --fs-xl:   1.25rem;   /* card and subsection titles */
  --fs-2xl:  1.5rem;    /* article/detail titles */
  --fs-3xl:  2rem;      /* page titles */
  --fs-4xl:  2.5rem;    /* display headings */
  --fs-relative-sm: 0.9em;

  /* Line heights */
  --lh-tight:   1.2;    /* headings */
  --lh-hint:    1.4;    /* hints, aside text */
  --lh-relaxed: 1.5;    /* lists, popups */
  --lh-normal:  1.65;   /* body prose */

  /* Interaction */
  --duration-fast: 0.15s;
  --duration-faster: 0.08s;
  --border-width: 1px;
  --border-width-strong: 2px;
  --border-width-accent: 3px;
  --focus-ring:    0 0 0 2px var(--c-brand-ring);
  --focus-ring-strong: 0 0 0 3px var(--c-brand-ring);

  /* Layout */
  --width-main:    1080px;
  --width-sidebar: 220px;
  --width-toc:     200px;
  --space-page:    var(--sp-6);

  /* Dashboard workspace layout */
  --my-page-gutter: var(--sp-5);
  --my-pane-gap: var(--sp-3);
  --my-tab-min: 162px;
  --my-tab-height: 58px;
  --my-toc-min: 176px;
  --my-panel-shadow: none;

  /* Dashboard recurring component sizes */
  --size-xs: 16px;
  --size-sm: 28px;
  --size-md: 36px;
  --size-touch: 44px;
  --size-lg: 56px;
  --width-xs: 120px;
  --width-xs-lg: 128px;
  --width-sm: 160px;
  --width-sm-lg: 220px;
  --width-key: 96px;
  --width-lg: 320px;
  --width-md: 260px;
  --width-prose: 420px;
  --width-prose-lg: 640px;
  --width-modal-sm: 380px;
  --width-modal-lg: 860px;
  --height-thread: 360px;
  --height-row: 56px;
  --height-row-lg: 68px;
  --height-card: 72px;
  --height-card-lg: 96px;

  /* Dashboard semantic tones */
  --tone-blue-soft:   var(--c-info-bg);
  --tone-blue-strong: var(--c-link);
  --tone-blue-end:    var(--c-link);
  --tone-red-soft:    var(--c-error-bg);
  --tone-red-strong:  var(--c-error);
  --tone-orange-soft: var(--c-warning-bg);
  --tone-orange-strong: var(--c-warning);
  --tone-green-soft:  var(--c-success-bg);
  --tone-green-strong:var(--c-success);
  --tone-green-deep:  var(--c-success-text);
  --tone-green-end:   var(--c-success);
  --tone-purple-soft: var(--status-purple-bg);
  --tone-purple-strong:var(--status-purple-fg);
  --tone-purple-accent:var(--status-purple-fg);
  --tone-purple-end:  var(--status-purple-fg);
  --tone-teal-soft:   var(--c-surface-soft);
  --tone-teal-strong: var(--c-text-muted);
  --tone-gray-soft:   var(--c-surface-hover);
  --tone-gray-strong: var(--c-text-muted);
  --tone-gray-muted-bg: var(--c-surface-hover);
  --tone-gray-muted-fg: var(--c-text-dim);
}