/* Design tokens.
 *
 * Every colour, space and radius in this project resolves to a variable
 * declared here. Components never hard-code a hex value — that is what makes
 * the dark theme below a ~30-line override instead of a second stylesheet.
 */

:root {
  /* Tells the browser which palette to paint the things CSS cannot reach:
   * form control internals, the caret, scrollbars, the native select popup.
   * Without it those stay light while everything around them goes dark. */
  color-scheme: light;

  /* Neutrals — the surface stack, lightest to darkest */
  --c-bg:            #f6f7f9;
  --c-surface:       #ffffff;
  --c-surface-2:     #f1f3f6;
  --c-surface-3:     #e6e9ee;
  --c-border:        #dfe3e9;
  --c-border-strong: #c6ccd6;

  /* Text */
  --c-text:      #12161c;
  --c-text-soft: #566072;
  --c-text-mute: #8b95a6;
  --c-text-on-accent: #ffffff;

  /* Accent + semantic */
  --c-accent:       #4f46e5;
  --c-accent-hover: #4338ca;
  --c-accent-soft:  #eceafd;
  --c-accent-ring:  rgba(79, 70, 229, 0.35);

  --c-success:      #12805c;
  --c-success-soft: #dcf5ec;
  --c-warning:      #9a6400;
  --c-warning-soft: #fdf0d5;
  --c-danger:       #c02b3f;
  --c-danger-soft:  #fce8ea;
  --c-info:         #1668a8;
  --c-info-soft:    #e2f0fb;

  /* Spacing — a 4px scale, so vertical rhythm stays consistent */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Radii */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-full: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sh-2: 0 2px 8px rgba(16, 24, 40, 0.07);
  --sh-3: 0 12px 32px rgba(16, 24, 40, 0.12);

  /* Type */
  --f-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;

  /* Layout */
  --sidebar-w:           248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:            60px;

  /* The dimmer behind the mobile drawer and the modal. Not derived from a
   * neutral: it has to read the same in both themes, because in both it sits
   * over content rather than beside it. */
  --c-scrim: rgba(9, 12, 17, 0.55);

  --transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme. Applied from the OS preference, or forced by data-theme on
 * <html> when the user picks one explicitly — the attribute wins because it
 * is a later, more specific declaration. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --c-bg:            #0e1116;
    --c-surface:       #161b22;
    --c-surface-2:     #1c232c;
    --c-surface-3:     #242c37;
    --c-border:        #2a333f;
    --c-border-strong: #3b4757;

    --c-text:      #e8ecf2;
    --c-text-soft: #9aa5b5;
    --c-text-mute: #6e7a8c;

    --c-accent:       #7c74f0;
    --c-accent-hover: #8f89f5;
    --c-accent-soft:  #221f3d;
    --c-accent-ring:  rgba(124, 116, 240, 0.4);

    --c-success:      #3ddc9a;
    --c-success-soft: #12301f;
    --c-warning:      #f5c46b;
    --c-warning-soft: #33270f;
    --c-danger:       #ff7a8a;
    --c-danger-soft:  #361a20;
    --c-info:         #6cc0f5;
    --c-info-soft:    #10283a;

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 2px 8px rgba(0, 0, 0, 0.45);
    --sh-3: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --c-bg:            #0e1116;
  --c-surface:       #161b22;
  --c-surface-2:     #1c232c;
  --c-surface-3:     #242c37;
  --c-border:        #2a333f;
  --c-border-strong: #3b4757;

  --c-text:      #e8ecf2;
  --c-text-soft: #9aa5b5;
  --c-text-mute: #6e7a8c;

  --c-accent:       #7c74f0;
  --c-accent-hover: #8f89f5;
  --c-accent-soft:  #221f3d;
  --c-accent-ring:  rgba(124, 116, 240, 0.4);

  --c-success:      #3ddc9a;
  --c-success-soft: #12301f;
  --c-warning:      #f5c46b;
  --c-warning-soft: #33270f;
  --c-danger:       #ff7a8a;
  --c-danger-soft:  #361a20;
  --c-info:         #6cc0f5;
  --c-info-soft:    #10283a;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 2px 8px rgba(0, 0, 0, 0.45);
  --sh-3: 0 12px 32px rgba(0, 0, 0, 0.55);
}