/* ==========================================================================
   Design tokens — the only place raw values live.

   Palette: Catppuccin Mocha, matching the editor's Theme::CATPPUCCIN_MOCHA
   so the editor pane and the app chrome are the same surface.

   All tokens are prefixed --dn-. Tailwind v4 publishes its own --font-*,
   --text-*, --radius-* and --leading-* on :root and tree-shakes that set as
   utilities come and go, so an unprefixed token would collide silently.
   ========================================================================== */

:root {
    /* --- Raw palette ------------------------------------------------------ */
    --ctp-crust:     #11111b;
    --ctp-mantle:    #181825;
    --ctp-base:      #1e1e2e;
    --ctp-surface-0: #313244;
    --ctp-surface-1: #45475a;
    --ctp-surface-2: #585b70;
    --ctp-overlay-0: #6c7086;
    --ctp-subtext-0: #a6adc8;
    --ctp-text:      #cdd6f4;

    --ctp-mauve:     #cba6f7;
    --ctp-green:     #a6e3a1;
    --ctp-peach:     #fab387;
    --ctp-red:       #f38ba8;

    /* --- Semantic surfaces ------------------------------------------------ */
    --dn-bg-app:     var(--ctp-base);      /* editor pane, page background     */
    --dn-bg-sunken:  var(--ctp-mantle);    /* sidebar, chrome                  */
    --dn-bg-well:    var(--ctp-crust);     /* deepest: inputs, scrollbar track */
    --dn-bg-raised:  var(--ctp-surface-0); /* hover, selected                  */
    --dn-bg-overlay: var(--ctp-surface-1); /* popovers, tooltips               */

    /* --- Semantic text ---------------------------------------------------- */
    --dn-fg:           var(--ctp-text);
    --dn-fg-muted:     var(--ctp-subtext-0);
    --dn-fg-faint:     var(--ctp-overlay-0);
    --dn-fg-on-accent: var(--ctp-crust);

    /* --- Lines ------------------------------------------------------------ */
    --dn-border:        var(--ctp-surface-0);
    --dn-border-strong: var(--ctp-surface-1);

    /* --- Accent & status -------------------------------------------------- */
    --dn-accent:       var(--ctp-mauve);
    --dn-accent-hover: color-mix(in oklab, var(--ctp-mauve) 88%, white);
    --dn-accent-muted: color-mix(in oklab, var(--ctp-mauve) 22%, transparent);
    --dn-success:      var(--ctp-green);
    --dn-warning:      var(--ctp-peach);
    --dn-danger:       var(--ctp-red);

    /* --- Type ------------------------------------------------------------- */
    --dn-font-ui: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
                  Roboto, sans-serif;
    --dn-font-code: "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace,
                    "SF Mono", Consolas, "Liberation Mono", monospace;

    --dn-text-xs:   0.75rem;   /* 12 — captions, counts        */
    --dn-text-sm:   0.8125rem; /* 13 — sidebar, dense chrome   */
    --dn-text-base: 0.875rem;  /* 14 — UI default              */
    --dn-text-md:   1rem;      /* 16 — prose                   */
    --dn-text-lg:   1.25rem;   /* 20 — section headings        */
    --dn-text-xl:   1.5rem;    /* 24 — page title              */

    --dn-leading-tight:  1.25;
    --dn-leading-normal: 1.55;

    --dn-tracking-caps: 0.08em; /* eyebrows / all-caps labels */

    /* --- Space (4px base) -------------------------------------------------- */
    --dn-space-1: 0.25rem;
    --dn-space-2: 0.5rem;
    --dn-space-3: 0.75rem;
    --dn-space-4: 1rem;
    --dn-space-5: 1.5rem;
    --dn-space-6: 2rem;
    --dn-space-7: 3rem;

    /* --- Shape ------------------------------------------------------------- */
    --dn-radius-sm: 3px;
    --dn-radius:    5px;
    --dn-radius-lg: 8px;

    /* --- Motion ------------------------------------------------------------ */
    --dn-ease:      cubic-bezier(0.2, 0, 0, 1);
    --dn-dur-fast:  90ms;
    --dn-dur:       160ms;

    /* --- Elevation ---------------------------------------------------------- */
    --dn-shadow: 0 4px 16px rgb(0 0 0 / 0.35);

    /* --- Layout ------------------------------------------------------------- */
    --dn-sidebar-width: 240px;
    --dn-measure: 72ch; /* max line length for prose */
}