/* ==========================================================================
   Design tokens
   Brand ramps are taken from the reference palette:
     Teal    — primary. Structure, navigation, "To Do", progress.
     Amber   — emphasis only. "In Progress", medium priority, soft warnings.
     Coral   — emphasis only. High priority, overdue, destructive actions.
   ========================================================================== */

:root {
  /* --- Teal (primary) ---------------------------------------------------- */
  --color-teal:            #3D8B7A;
  --color-teal-deep:       #2E6D5F; /* text on light surfaces (AA) */
  --color-teal-press:      #275C50;
  --color-teal-light:      #8FC9BE;
  --color-teal-pale:       #E4F4F0;

  /* --- Mustard (emphasis) ------------------------------------------------ */
  --color-mustard:         #F5B820;
  --color-mustard-deep:    #8A6A00; /* text on light surfaces (AA) */
  --color-mustard-light:   #FFD968;
  --color-mustard-pale:    #FFF8E1;

  /* --- Coral (emphasis) -------------------------------------------------- */
  --color-coral:           #C8654A;
  --color-coral-deep:      #A0492F; /* text on light surfaces (AA) */
  --color-coral-press:     #8A3D26;
  --color-coral-light:     #E8A898;
  --color-coral-pale:      #FBF0EC;

  /* --- Neutrals ---------------------------------------------------------- */
  --bg:                    #F4F6F5;
  --surface:               #FFFFFF;
  --surface-sunken:        #FAFBFA;
  --surface-hover:         #EFF2F1;
  --line:                  #E2E7E5;
  --line-strong:           #CFD6D3;
  --ink:                   #2B2F2C;
  --ink-2:                 #5F655E;
  --ink-3:                 #8D938B;
  --ink-disabled:          #B4B9B2;

  /* --- Semantic: status -------------------------------------------------- */
  /* Status colours are reserved. They are never reused for project identity. */
  /* Swapped with Done: the work still ahead is what should catch the eye. */
  --status-todo-fg:        var(--color-teal-deep);
  --status-todo-bg:        var(--color-teal-pale);
  --status-todo-line:      var(--color-teal-light);
  --status-todo-dot:       var(--color-teal);

  --status-progress-fg:    var(--color-mustard-deep);
  --status-progress-bg:    var(--color-mustard-pale);
  --status-progress-line:  var(--color-mustard-light);
  --status-progress-dot:   var(--color-mustard);

  --status-done-fg:        var(--ink-2);
  --status-done-bg:        var(--surface-sunken);
  --status-done-line:      var(--line-strong);
  --status-done-dot:       #A8AEA6;

  /* --- Semantic: priority ------------------------------------------------ */
  --priority-high:         var(--color-coral);
  --priority-high-fg:      var(--color-coral-deep);
  --priority-medium:       var(--color-mustard);
  --priority-medium-fg:    var(--color-mustard-deep);
  --priority-low:          var(--color-teal-light);
  --priority-low-fg:       var(--ink-2);

  /* --- Semantic: alerts -------------------------------------------------- */
  --overdue-fg:            var(--color-coral-deep);
  --overdue-bg:            var(--color-coral-pale);
  --overdue-line:          var(--color-coral-light);

  /* --- Project identity (categorical, fixed order — never cycled) --------
     Validated for CVD separation. Every swatch is always paired with the
     project name, so identity is never carried by colour alone. */
  --project-1: #3D8B7A;
  --project-2: #C8A84B;
  --project-3: #2E7FB0;
  --project-4: #B0603F;
  --project-5: #7F9440;
  --project-6: #8259B0;

  /* --- Sequential ramp (calendar density, single hue light -> dark) ------ */
  /* Kept light enough that task text stays legible on top of the tint. */
  --seq-0: transparent;
  --seq-1: #F4FAF8;
  --seq-2: #E9F5F2;
  --seq-3: #DBEFEA;
  --seq-4: #C9E6DF;

  /* --- Typography -------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic",
               system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Mono", "Consolas",
               "D2Coding", monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  26px;
  --text-3xl:  34px;

  /* --- Space / radius / elevation ---------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(43, 47, 44, 0.05);
  --shadow-md: 0 2px 8px rgba(43, 47, 44, 0.07);
  --shadow-lg: 0 12px 32px rgba(43, 47, 44, 0.14);

  --ring: 0 0 0 3px rgba(61, 139, 122, 0.28);

  /* --- Theme-dependent one-offs ----------------------------------------- */
  --on-accent:     #FFFFFF;                 /* text on teal / coral fills */
  --primary-hover: var(--color-teal-deep);
  --topbar-bg:     rgba(244, 246, 245, 0.86);
  --backdrop:      rgba(43, 47, 44, 0.32);

  --sidebar-w: 232px;
  --topbar-h: 60px;
}

/* ==========================================================================
   Dark mode — "Deep Forest": a charcoal with a faint green cast, so it reads
   as the same app as the mist-grey light mode. Only colour tokens change.
   Fills behind white text (--color-teal / mustard / coral) and the project
   colours stay as they are; the *-deep text shades lighten for contrast.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-teal-deep:       #7CCBB9;
  --color-teal-press:      #2E6D5F;
  --color-teal-light:      #2F6B5E;
  --color-teal-pale:       #1D302B;

  --color-mustard-deep:    #E8C35A;
  --color-mustard-light:   #6B5518;
  --color-mustard-pale:    #2E2716;

  --color-coral-deep:      #E58C73;
  --color-coral-press:     #A0492F;
  --color-coral-light:     #7A3F30;
  --color-coral-pale:      #2F1C17;

  --bg:                    #141817;
  --surface:               #1C2120;
  --surface-sunken:        #181C1B;
  --surface-hover:         #242A28;
  --line:                  #2A302E;
  --line-strong:           #3A4240;
  --ink:                   #E6EAE8;
  --ink-2:                 #A9B1AE;
  --ink-3:                 #7C8683;
  --ink-disabled:          #545C59;

  --status-done-dot:       #6E7673;

  --seq-1: #18221F;
  --seq-2: #1C2A26;
  --seq-3: #21332E;
  --seq-4: #273D37;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50);
  --ring: 0 0 0 3px rgba(124, 203, 185, 0.35);

  --primary-hover: #357C6D;
  --topbar-bg:     rgba(20, 24, 23, 0.86);
  --backdrop:      rgba(0, 0, 0, 0.55);
}