/* ==========================================================================
   CNGC design tokens — values taken from the reference mockup
   (cngc-intranet-maquette.netlify.app). Edit here, never inline.
   ========================================================================== */

@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/GeneralSans-Semibold.otf") format("opentype"); font-weight: 600; font-display: swap; }

:root {
  /* Surfaces */
  --page: #f2f3ef;
  --surface: #fff;
  --surface-2: #f7f8f5;
  --ink: #2a2a2a;
  --muted: #6b6d66;
  --faint: #9a9c94;
  --line: color-mix(in oklab, var(--ink) 10%, var(--surface));
  --line-strong: color-mix(in oklab, var(--ink) 18%, var(--surface));
  --hover: color-mix(in oklab, var(--ink) 4.5%, var(--surface));
  --chip: color-mix(in oklab, var(--ink) 6%, var(--surface));

  /* Brand accent (olive) */
  --olive: #afbb42;
  --olive-ink: #5c6418;
  --olive-soft: color-mix(in oklab, var(--olive) 18%, var(--surface));
  --on-olive: #2a2a2a;
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--olive) 35%, transparent);

  /* Status */
  --danger: #b4412e;
  --on-danger: #ffffff;
  --danger-soft: color-mix(in oklab, var(--danger) 10%, var(--surface));
  --warn: #9a6a12;
  --warn-soft: color-mix(in oklab, #d9a23a 18%, var(--surface));
  --success: var(--olive-ink);
  --success-soft: var(--olive-soft);

  /* Rail (sidebar) */
  --rail: #2a2a2a;
  --rail-ink: #f1f2ec;
  --rail-muted: #b8bab2;
  --rail-hover: #ffffff0f;
  --rail-active: #afbb4229;
  --rail-line: #ffffff0f;

  /* Chrome, scrim, toasts */
  --chrome: #f2f3efb8;
  --scrim: #14151352;
  --toast: #232422;
  --toast-ink: #f1f2ec;

  /* File type tints (derived from the mockup PDF/PPT/XLS tiles) */
  --t-red: #b4412e;
  --t-orange: #b9612a;
  --t-blue: #3f6489;
  --t-green: #4f7a3a;
  --t-olive: #5c6418;
  --t-sage: #5f6b52;
  --t-amber: #9a6a12;
  --t-neutral: #6b6d66;

  /* Elevation */
  --e-1: 0 1px 2px #1e1f1c0d;
  --e-2: 0 1px 2px #1e1f1c0d, 0 12px 32px -14px #1e1f1c33;
  --e-3: 0 2px 6px #1e1f1c0f, 0 28px 64px -24px #1e1f1c52;

  /* Radius */
  --r-xs: 6px;      /* kbd, tiny chips */
  --r-sm: 9px;      /* small buttons, nav items, menu items */
  --r-md: 10px;     /* controls (inputs, buttons) */
  --r-tile: 11px;   /* icon tiles */
  --r-lg: 14px;     /* cards, menus */
  --r-xl: 20px;     /* panels, drawers, dialogs */
  --r-full: 999px;

  /* Spacing scale (4px grid) */
  --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; --s-16: 64px;

  /* Layout */
  --sidebar-width: 264px;
  --header-height: 64px;
  --content-max: 1240px;
  --tree-width: 208px;
  --drawer-width: 460px;
  --tabbar-height: 64px;

  /* Typography */
  --font: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-title: 1.375rem;   /* 22px */
  --fs-heading: 1.0625rem;/* 17px */
  --fs-body: 14px;
  --fs-sm: 13.5px;
  --fs-xs: 12.5px;
  --fs-label: 0.78rem;    /* 12.5px */
  --fs-micro: 11.5px;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --t-fast: 120ms;
  --t-base: 160ms;
  --t-slow: 220ms;

  color-scheme: light;
}

/* ---- Dark theme (the mockup ships one: same tokens, darker values) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #141513; --surface: #1c1d1b; --surface-2: #222320; --ink: #ecede8; --muted: #a3a59d; --faint: #7c7e77;
    --line: color-mix(in oklab, var(--ink) 11%, var(--surface));
    --line-strong: color-mix(in oklab, var(--ink) 20%, var(--surface));
    --hover: color-mix(in oklab, var(--ink) 5%, var(--surface));
    --olive-ink: #c3ce5e; --olive-soft: color-mix(in oklab, var(--olive) 16%, var(--surface));
    --danger: #e0715c; --on-danger: #1a0f0c; --warn: #e2b55a; --rail: #0f100f; --chrome: #141513b8; --scrim: #00000080;
    --t-red: #e0715c; --t-orange: #e08a52; --t-blue: #86a7c9; --t-green: #93bb7a; --t-olive: #c3ce5e;
    --t-sage: #a7b394; --t-amber: #e2b55a; --t-neutral: #a3a59d;
    --e-1: 0 1px 2px #0000004d; --e-2: 0 1px 2px #0000004d, 0 14px 36px -14px #0009;
    --e-3: 0 2px 6px #00000059, 0 30px 70px -24px #000000bf;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #141513; --surface: #1c1d1b; --surface-2: #222320; --ink: #ecede8; --muted: #a3a59d; --faint: #7c7e77;
  --line: color-mix(in oklab, var(--ink) 11%, var(--surface));
  --line-strong: color-mix(in oklab, var(--ink) 20%, var(--surface));
  --hover: color-mix(in oklab, var(--ink) 5%, var(--surface));
  --olive-ink: #c3ce5e; --olive-soft: color-mix(in oklab, var(--olive) 16%, var(--surface));
  --danger: #e0715c; --on-danger: #1a0f0c; --warn: #e2b55a; --rail: #0f100f; --chrome: #141513b8; --scrim: #00000080;
  --t-red: #e0715c; --t-orange: #e08a52; --t-blue: #86a7c9; --t-green: #93bb7a; --t-olive: #c3ce5e;
  --t-sage: #a7b394; --t-amber: #e2b55a; --t-neutral: #a3a59d;
  --e-1: 0 1px 2px #0000004d; --e-2: 0 1px 2px #0000004d, 0 14px 36px -14px #0009;
  --e-3: 0 2px 6px #00000059, 0 30px 70px -24px #000000bf;
  color-scheme: dark;
}

@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); --muted: var(--ink); --chrome: var(--page); }
}