/* Skeds design tokens.
   One token set, two themes. Everything downstream reads these — no raw hex in app.css
   except inside this file. Mirrors the token contract in ../11-frontend-app.md#design-system. */

:root {
  /* ---- type ---------------------------------------------------------- */
  --font-sans: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;   /* 11px — table meta, keycaps */
  --text-xs:  0.75rem;     /* 12px — labels, badges */
  --text-sm:  0.8125rem;   /* 13px — dense tables, secondary */
  --text-md:  0.9375rem;   /* 15px — body */
  --text-lg:  1.0625rem;   /* 17px — card titles */
  --text-xl:  1.375rem;    /* 22px — page titles */
  --text-2xl: 1.75rem;     /* 28px — hero numbers */
  --text-3xl: 2.5rem;

  --lh-tight: 1.2;
  --lh-body: 1.55;

  --fw-normal: 420;
  --fw-medium: 550;
  --fw-bold: 680;

  /* ---- space (4px base) ---------------------------------------------- */
  --s-1: 2px;  --s-2: 4px;  --s-3: 6px;  --s-4: 8px;  --s-5: 12px;
  --s-6: 16px; --s-7: 20px; --s-8: 24px; --s-9: 32px; --s-10: 40px;
  --s-11: 56px; --s-12: 72px;

  /* ---- radius / elevation ------------------------------------------- */
  --r-sm: 4px; --r-md: 7px; --r-lg: 11px; --r-xl: 16px; --r-full: 999px;

  --shadow-1: 0 1px 2px rgb(16 18 27 / .06), 0 1px 1px rgb(16 18 27 / .04);
  --shadow-2: 0 2px 6px rgb(16 18 27 / .07), 0 1px 2px rgb(16 18 27 / .06);
  --shadow-3: 0 12px 32px -8px rgb(16 18 27 / .18), 0 2px 8px rgb(16 18 27 / .08);

  /* ---- motion -------------------------------------------------------- */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur-1: 90ms; --dur-2: 160ms; --dur-3: 260ms;

  /* ---- layout -------------------------------------------------------- */
  --topbar-h: 52px;
  --sidebar-w: 232px;
  --row-h: 40px;
  --content-max: 1180px;
}

/* ---- light theme ----------------------------------------------------- */
:root, [data-theme="light"] {
  --bg:            #f7f7fa;
  --bg-raised:     #ffffff;
  --bg-sunken:     #eeeef3;
  --bg-hover:      #f1f1f6;
  --bg-active:     #e8e8f0;
  --bg-inset:      #fafafc;

  --fg:            #16161d;
  --fg-muted:      #5f6070;
  --fg-subtle:     #8a8b9a;
  --fg-on-accent:  #ffffff;

  --border:        #e2e2ea;
  --border-strong: #cfd0db;
  --border-focus:  #6d5ef5;

  --accent:        #5b4bf0;
  --accent-hover:  #4d3ee3;
  --accent-soft:   #eeecfe;
  --accent-fg:     #4436cf;

  --success:       #157f52;
  --success-soft:  #e2f6ea;
  --warn:          #9a6206;
  --warn-soft:     #fdf3dd;
  --danger:        #c3352b;
  --danger-hover:  #a92a21;
  --danger-soft:   #fdeceb;
  --info:          #1f6fb2;
  --info-soft:     #e7f2fb;
  --staff:         #7c3aad;
  --staff-soft:    #f5ebfb;

  --rail-bg:       #16161f;
  --rail-fg:       #d7d8e4;
  --rail-fg-muted: #8f90a6;
  --rail-hover:    #23232f;
  --rail-active:   #2d2c40;
  --rail-border:   #26262f;

  --skeleton:      linear-gradient(90deg, #eeeef3 25%, #e5e5ec 37%, #eeeef3 63%);
}

/* ---- dark theme ------------------------------------------------------ */
[data-theme="dark"] {
  --bg:            #101017;
  --bg-raised:     #191922;
  --bg-sunken:     #0b0b11;
  --bg-hover:      #21212c;
  --bg-active:     #292935;
  --bg-inset:      #14141c;

  --fg:            #ecedf4;
  --fg-muted:      #9fa0b3;
  --fg-subtle:     #71728a;
  --fg-on-accent:  #ffffff;

  --border:        #292933;
  --border-strong: #3a3a47;
  --border-focus:  #8b7dff;

  --accent:        #7b6bff;
  --accent-hover:  #8d80ff;
  --accent-soft:   #221f45;
  --accent-fg:     #b3a8ff;

  --success:       #43c98a;
  --success-soft:  #102b1f;
  --warn:          #e0a33a;
  --warn-soft:     #2d2211;
  --danger:        #f4756a;
  --danger-hover:  #f78d84;
  --danger-soft:   #2f1614;
  --info:          #5aaae8;
  --info-soft:     #10202e;
  --staff:         #c08ae4;
  --staff-soft:    #251733;

  --rail-bg:       #0b0b11;
  --rail-fg:       #c9cad8;
  --rail-fg-muted: #7c7d94;
  --rail-hover:    #17171f;
  --rail-active:   #22222e;
  --rail-border:   #1d1d26;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 2px 8px rgb(0 0 0 / .45);
  --shadow-3: 0 16px 40px -10px rgb(0 0 0 / .6), 0 2px 8px rgb(0 0 0 / .4);

  --skeleton:      linear-gradient(90deg, #1c1c25 25%, #24242f 37%, #1c1c25 63%);
}

/* ---- density --------------------------------------------------------- */
[data-density="compact"] {
  --row-h: 30px;
  --text-md: 0.875rem;
  --s-6: 12px; --s-7: 14px; --s-8: 18px; --s-9: 24px;
}