/* TASK design tokens v2 - "porcelain glass + pixel".
   Apple-calm surfaces floating on a grainy chromatic field; Pixelify Sans
   carries the display voice; dither stays the signature texture.
   Every v1 token name is preserved - only values (and additions) changed. */
@import url("../fonts/pixelify.css");

:root {
  /* Neutrals */
  --bg-page: #F2F1EC;
  --bg-surface: #FFFFFF;
  --bg-sunken: #E9E8E1;
  --ink: #1C1C19;
  --ink-secondary: #6E6E66;
  --ink-faint: #A3A399;
  --hairline: #E3E2DA;
  --block-border: #D8D7CE;   /* stronger edge for solid content blocks */
  --block-bg: #FBFBF8;       /* solid card surface (opaque, no blur) */

  /* Atmosphere - the chromatic field behind the glass */
  --mesh-a: rgba(217, 242, 106, 0.55);   /* lime */
  --mesh-b: rgba(74, 125, 255, 0.28);    /* sky */
  --mesh-c: rgba(232, 161, 58, 0.30);    /* peach */
  --mesh-opacity: 1;

  /* Liquid glass */
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-inner: rgba(28, 28, 25, 0.05);
  --glass-blur: saturate(1.5) blur(22px);
  --glass-shadow: 0 12px 40px rgba(28, 28, 25, 0.10), 0 1px 2px rgba(28, 28, 25, 0.05);

  /* Accent - chartreuse. It is ALWAYS a light color, so text and icons on
     top of it must use --accent-ink (near-black) in BOTH themes. Never
     inherit --ink onto an accent fill (that breaks in dark mode). */
  --accent: #D9F26A;
  --accent-hover: #CBE84C;
  --accent-soft: #F0F8CE;
  --accent-ink: #16160F;

  /* Status */
  --status-todo: #8A8A80;
  --status-in-progress: #4A7DFF;
  --status-on-hold: #E8A13A;
  --status-done: #3DA35D;

  /* Importance & urgency share one low/normal/high ramp */
  --level-low: #3DA35D;
  --level-normal: #E8871E;
  --level-high: #D64545;
  --blocked: #8A63D2;

  /* Due-date proximity (computed) */
  --due-later: #6E6E66;
  --due-soon: #E8871E;
  --due-today: #D64545;
  --due-overdue-bg: #D64545;
  --due-overdue-ink: #FFFFFF;

  /* Feedback */
  --danger: #D64545;
  --danger-soft: #FBEAEA;
  --success: #3DA35D;

  /* Typography */
  --font-display: "Pixelify Sans", "Cascadia Mono", ui-monospace, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* Radii - solid + crisp. Content blocks stay tight and squarish so the
     pixel/dither language reads; chrome + controls keep the pill. */
  --r-card: 10px;
  --r-ctl: 6px;
  --r-pill: 999px;
  --r-block: 4px;   /* task cards, rows, toasts - the "pixel block" corner */

  /* Elevation, focus, layers, motion */
  --shadow-card: 0 1px 2px rgba(28, 28, 25, 0.06), 0 8px 24px rgba(28, 28, 25, 0.05);
  --shadow-pop: 0 18px 50px rgba(28, 28, 25, 0.18);
  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--ink);
  --z-header: 100; --z-nav: 200; --z-modal: 1000; --z-toast: 1100;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --dur: 180ms;

  /* Dither patterns (the signature texture) */
  --dither-ink: repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%);
  --dither-accent: repeating-conic-gradient(var(--accent) 0% 25%, transparent 0% 50%);
}

/* Dark theme - "obsidian glass". Same names, applied via data-theme. */
:root[data-theme="dark"] {
  --bg-page: #131311;
  --bg-surface: #1D1D1A;
  --bg-sunken: #232320;
  --ink: #F0F0EB;
  --ink-secondary: #A5A59B;
  --ink-faint: #6E6E66;
  --hairline: #2E2E29;
  --block-border: #3A3A34;
  --block-bg: #26261F;

  --mesh-a: rgba(217, 242, 106, 0.14);
  --mesh-b: rgba(74, 125, 255, 0.16);
  --mesh-c: rgba(232, 161, 58, 0.10);

  --glass-bg: rgba(29, 29, 26, 0.55);
  --glass-bg-strong: rgba(29, 29, 26, 0.80);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-inner: rgba(255, 255, 255, 0.04);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);

  --accent-hover: #E4F98C;
  --accent-soft: #2E331B;

  --due-later: #A5A59B;
  --danger-soft: #3A2020;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--ink);
}