/*
 * DASP design tokens: the only place where colors, type, radii, shadows and
 * motion values are defined. Everything else uses var(--dasp-...).
 * Light theme is the default; dark theme applies with
 * <html data-dasp-theme="dark"> or <body class="theme-dark">.
 * Documented in docs/ui-design-system.md ("Tokens").
 */

:root {
  /* ---- Brand blue scale (charts, illustrations, special cases) ---- */
  --dasp-blue-50: #eef7fd;
  --dasp-blue-100: #dcedfa;
  --dasp-blue-200: #b7dbf3;
  --dasp-blue-300: #83c2ea;
  --dasp-blue-400: #4fb3ef;
  --dasp-blue-500: #1a8fd3;
  --dasp-blue-600: #0b7fc4;
  --dasp-blue-700: #0767a8;
  --dasp-blue-800: #0a4f80;
  --dasp-blue-900: #0f2747;

  /* ---- Surfaces ---- */
  --dasp-color-page: #f2f4f7;          /* app background: near-neutral, so the blue accent stands out */
  --dasp-color-surface: #ffffff;       /* cards, rows, sheets */
  --dasp-color-surface-alt: #e9edf2;   /* secondary fills, segmented controls, skeletons */
  --dasp-color-surface-raised: #ffffff;/* header / tab bar background */
  --dasp-color-bar: rgba(255, 255, 255, 0.72); /* translucent header / tab bar over scrolling content */
  --dasp-bar-blur: blur(20px) saturate(180%);
  --dasp-color-hero: #0f2747;          /* dark feature card */
  --dasp-color-line: #dfe5ec;          /* hairlines, borders */
  --dasp-color-line-strong: #c9d2dc;
  --dasp-color-backdrop: rgba(18, 34, 62, 0.32);
  --dasp-color-shadow: #14233b;        /* base of all shadows: color-mix(in srgb, var(--dasp-color-shadow) N%, transparent) */
  --dasp-color-paper: #ffffff;         /* PDF pages and drawing canvases: white in both themes */

  /* ---- Text ---- */
  --dasp-color-ink: #132443;           /* primary text */
  --dasp-color-ink-muted: #5f7491;     /* secondary text, inactive icons */
  --dasp-color-ink-faint: #8a9cb3;     /* placeholder, disabled */
  --dasp-color-on-accent: #ffffff;     /* text/icons on accent or status fills */
  --dasp-color-on-hero: #ffffff;
  --dasp-color-on-hero-muted: #c3d4ea;

  /* ---- Accent (DASP blue) ---- */
  --dasp-color-accent: #0b7fc4;        /* links, active icons, selection */
  --dasp-color-accent-fill: #0b7fc4;   /* primary buttons */
  --dasp-color-accent-pressed: #0767a8;
  --dasp-color-accent-soft: #e3f2fc;   /* tinted backgrounds, chips */
  --dasp-color-accent-soft-ink: #0767a8;
  --dasp-color-accent-faint: rgba(11, 127, 196, 0.08);

  /* ---- Status ---- */
  --dasp-color-success: #1e9a57;
  --dasp-color-success-soft: #ddf3e6;
  --dasp-color-success-soft-ink: #17683f;
  --dasp-color-warning: #e98a00;
  --dasp-color-warning-soft: #fff0d9;
  --dasp-color-warning-soft-ink: #9a5b00;
  --dasp-color-danger: #d9364f;
  --dasp-color-danger-soft: #fde8ea;
  --dasp-color-danger-soft-ink: #a3243a;
  --dasp-color-neutral-soft: #e9edf2;  /* neutral chip (e.g. "Planung") */
  --dasp-color-neutral-soft-ink: #3f4a5c;
  --dasp-color-favorite: #f5a524;      /* active favorite star, progress ring */

  /* ---- Inverse (toasts, tooltips) ---- */
  --dasp-color-inverse: rgba(19, 36, 67, 0.92);
  --dasp-color-on-inverse: #ffffff;
  --dasp-color-inverse-success: #6fe0a0;
  --dasp-color-inverse-warning: #ffc56b;
  --dasp-color-inverse-info: #8dd8ff;

  /* ---- Focus ---- */
  --dasp-focus-ring: 0 0 0 3px rgba(11, 127, 196, 0.38);

  /* ---- Shadows ---- */
  --dasp-shadow-sm: 0 1px 3px rgba(20, 35, 59, 0.10);
  --dasp-shadow-md: 0 8px 18px rgba(20, 35, 59, 0.10);
  --dasp-shadow-lg: 0 24px 70px rgba(19, 36, 67, 0.18);
  --dasp-shadow-accent: 0 8px 18px rgba(11, 127, 196, 0.24);
  --dasp-shadow-side: -12px 0 32px rgba(19, 36, 67, 0.16);
  --dasp-shadow-up: 0 -10px 24px rgba(19, 36, 67, 0.10);
  /* Darkens the lower part of a photo so white text on it stays readable. */
  --dasp-gradient-photo-scrim: linear-gradient(180deg, rgba(6, 16, 32, 0.25) 0%, rgba(6, 16, 32, 0.92) 78%);

  /* ---- Typography ---- */
  --dasp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dasp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* codes and keys */
  --dasp-weight-regular: 400;
  --dasp-weight-medium: 500;
  --dasp-weight-semibold: 600;         /* maximum weight in DASP */

  /* Type roles: use font: var(--dasp-type-...) and the matching tracking. */
  --dasp-type-large-title: 600 28px/1.15 var(--dasp-font-sans);  /* screen title */
  --dasp-tracking-large-title: -0.02em;
  --dasp-type-title: 600 20px/1.25 var(--dasp-font-sans);        /* sheet title, detail heading, hero name */
  --dasp-tracking-title: -0.015em;
  --dasp-type-headline: 600 17px/1.3 var(--dasp-font-sans);      /* section title, app header title */
  --dasp-tracking-headline: -0.01em;
  --dasp-type-body: 400 16px/1.4 var(--dasp-font-sans);          /* body text, inputs, options */
  --dasp-type-body-medium: 500 16px/1.35 var(--dasp-font-sans);  /* list row titles, buttons */
  --dasp-type-subhead: 400 15px/1.4 var(--dasp-font-sans);       /* secondary body, key/value */
  --dasp-type-footnote: 400 13px/1.35 var(--dasp-font-sans);     /* meta lines, hints */
  --dasp-type-caption: 500 12px/1.3 var(--dasp-font-sans);       /* chips, badges, labels */
  --dasp-type-caption-2: 500 11px/1.2 var(--dasp-font-sans);     /* tab bar labels, kickers */
  --dasp-tracking-caps: 0.06em;                                  /* uppercase labels */

  /* ---- Icons ---- */
  --dasp-icon-xs: 14px;
  --dasp-icon-sm: 16px;
  --dasp-icon-md: 22px;
  --dasp-icon-lg: 24px;
  --dasp-icon-xl: 32px;

  /* ---- Radii ---- */
  --dasp-radius-sm: 10px;
  --dasp-radius-md: 16px;
  --dasp-radius-lg: 24px;
  --dasp-radius-pill: 999px;

  /* ---- Layers (z-index), lowest to highest ---- */
  --dasp-z-tabbar: 960;
  --dasp-z-header: 980;
  --dasp-z-sheet: 34000;   /* + stack position of each open sheet */
  --dasp-z-dialog: 36000;  /* message boxes are always above sheets */
  --dasp-z-toast: 37000;

  /* ---- Motion ---- */
  --dasp-motion-fast: 140ms;
  --dasp-motion-duration: 280ms;
  --dasp-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

:root[data-dasp-theme="dark"],
.theme-dark {
  --dasp-color-page: #0e1a2b;
  --dasp-color-surface: #142a40;
  --dasp-color-surface-alt: #1a3550;
  --dasp-color-surface-raised: #11223a;
  --dasp-color-bar: rgba(16, 33, 52, 0.72);
  --dasp-color-hero: #0b1a2c;
  --dasp-color-line: #244862;
  --dasp-color-line-strong: #2f5a78;
  --dasp-color-backdrop: rgba(0, 0, 0, 0.5);
  --dasp-color-shadow: #000000;

  --dasp-color-ink: #ecf7ff;
  --dasp-color-ink-muted: #a9bfd5;
  --dasp-color-ink-faint: #7189a3;
  --dasp-color-on-hero-muted: #a9bfd5;

  --dasp-color-accent: #4fb3ef;
  --dasp-color-accent-fill: #0b7fc4;
  --dasp-color-accent-pressed: #1a8fd3;
  --dasp-color-accent-soft: #173a57;
  --dasp-color-accent-soft-ink: #9ad3f7;
  --dasp-color-accent-faint: rgba(79, 179, 239, 0.08);

  --dasp-color-success: #4cc98a;
  --dasp-color-success-soft: #163a2a;
  --dasp-color-success-soft-ink: #86dcaa;
  --dasp-color-warning: #f5b94d;
  --dasp-color-warning-soft: #3a2c10;
  --dasp-color-warning-soft-ink: #f5b94d;
  --dasp-color-danger: #ff6b7f;
  --dasp-color-danger-soft: #3d1d24;
  --dasp-color-danger-soft-ink: #ff9aa8;
  --dasp-color-neutral-soft: #233447;
  --dasp-color-neutral-soft-ink: #b8c6d8;
  --dasp-color-inverse: rgba(36, 72, 98, 0.96);

  --dasp-focus-ring: 0 0 0 3px rgba(79, 179, 239, 0.45);

  --dasp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --dasp-shadow-md: 0 8px 18px rgba(0, 0, 0, 0.30);
  --dasp-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.34);
  --dasp-shadow-accent: 0 8px 18px rgba(0, 0, 0, 0.30);
  --dasp-shadow-side: -12px 0 32px rgba(0, 0, 0, 0.40);
  --dasp-shadow-up: 0 -10px 24px rgba(0, 0, 0, 0.30);
}

/*
 * Legacy names, kept so existing CSS keeps working while it is migrated to the
 * --dasp-color-* / --dasp-type-* names above. Do not use them in new code.
 * Declared on :root and on .theme-dark so they resolve to the dark values there.
 */
:root,
.theme-dark {
  --dasp-blue: var(--dasp-color-accent);
  --dasp-blue-strong: var(--dasp-color-accent-pressed);
  --dasp-ink: var(--dasp-color-ink);
  --dasp-text: var(--dasp-color-ink);
  --dasp-muted: var(--dasp-color-ink-muted);
  --dasp-line: var(--dasp-color-line);
  --dasp-border: var(--dasp-color-line);
  --dasp-border-strong: var(--dasp-color-line-strong);
  --dasp-page: var(--dasp-color-page);
  --dasp-bg: var(--dasp-color-page);
  --dasp-panel: var(--dasp-color-surface);
  --dasp-surface: var(--dasp-color-surface);
  --dasp-surface-soft: var(--dasp-color-surface-alt);
  --dasp-accent: var(--dasp-color-accent);
  --dasp-accent-strong: var(--dasp-color-accent-pressed);
  --dasp-accent-soft: var(--dasp-color-accent-soft);
  --dasp-accent-faint: var(--dasp-color-accent-faint);
  --dasp-card-accent: var(--dasp-color-accent);
  --dasp-success: var(--dasp-color-success);
  --dasp-warning: var(--dasp-color-warning);
  --dasp-danger: var(--dasp-color-danger);
  --dasp-shadow: var(--dasp-shadow-lg);
  --dasp-soft-shadow: var(--dasp-shadow-md);
  --dasp-radius: 12px;
  /* Desktop sidebar keeps its dark look until the desktop redesign. */
  --dasp-sidebar: #070708;
  --dasp-sidebar-soft: #111214;
  --dasp-sidebar-text: #d6d9df;
  --dasp-sidebar-muted: #8d949e;
}