/* Mayfly design tokens — Phase 2.
   Dark is the default: this app shows photographs, and a dark ground keeps the
   interface out of their way. Light is fully specified, not an afterthought.

   Two colour families are deliberately unrelated:
     - the expiry ramp   accent → warn → urgent   (time running out)
     - keep              a cool blue              (no timer at all)
   They must never be confused, so "kept" can never read as a countdown state. */

:root {
  /* dark, default */
  --ground:        #0e1113;
  --surface:       #171b1e;
  --surface-raised:#1f2427;
  --rule:          #262c2f;
  --rule-strong:   #384044;

  --ink:           #ecf1ef;
  --ink-soft:      #a9b4b1;
  --ink-faint:     #6e7a77;

  --accent:        #4fbf9f;  /* live, plenty of time */
  --accent-bright: #9fe7ce;  /* highlight, the wings */
  --accent-sunk:   #12291f;
  --warn:          #e5a54b;  /* under 25% of life remaining */
  --urgent:        #e4736b;  /* under 10% */
  --keep:          #7fa8d9;  /* no expiry — a different family on purpose */

  --font-ui:      "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num:     "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;

  --step--1: 0.8125rem;  /* 13px  captions */
  --step-0:  1rem;       /* 16px  body — never smaller for reading text */
  --step-1:  1.125rem;   /* 18px  item titles */
  --step-2:  1.375rem;   /* 22px  section heads */
  --step-3:  1.75rem;    /* 28px  screen titles */
  --step-4:  2.25rem;    /* 36px  display */

  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-6: 1.5rem;  --space-8: 2rem;   --space-12: 3rem;

  --radius-card: 10px;
  --radius-sheet: 16px;
  --radius-chip: 999px;
  --hit: 48px;                 /* minimum touch target, no exceptions */

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 140ms;
  --dur-lift: 700ms;           /* the expiry transition */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:        #f7f9f8;
    --surface:       #ffffff;
    --surface-raised:#ffffff;
    --rule:          #e2e7e5;
    --rule-strong:   #c9d1ce;

    --ink:           #121618;
    --ink-soft:      #4c5654;
    --ink-faint:     #75807d;

    --accent:        #12695a;
    --accent-bright: #2e9377;
    --accent-sunk:   #e4efeb;
    --warn:          #8a5a08;
    --urgent:        #a62f27;
    --keep:          #2f5e96;
  }
}

:root[data-theme="light"] {
  --ground:#f7f9f8; --surface:#fff; --surface-raised:#fff;
  --rule:#e2e7e5; --rule-strong:#c9d1ce;
  --ink:#121618; --ink-soft:#4c5654; --ink-faint:#75807d;
  --accent:#12695a; --accent-bright:#2e9377; --accent-sunk:#e4efeb;
  --warn:#8a5a08; --urgent:#a62f27; --keep:#2f5e96;
}

/* The expiry transition. A mayfly lifting, not a fire burning — the panel was
   clear that nervous or jokey treatment of deletion destroys trust. */
@keyframes mayfly-lift {
  0%   { opacity: 1; filter: saturate(1);   transform: translateY(0)     scale(1); }
  45%  { opacity: .8; filter: saturate(.15); transform: translateY(-6px)  scale(.995); }
  100% { opacity: 0; filter: saturate(0);   transform: translateY(-22px) scale(.98); }
}
.is-expiring { animation: mayfly-lift var(--dur-lift) var(--ease) forwards; }

@media (prefers-reduced-motion: reduce) {
  .is-expiring { animation: none; opacity: 0; transition: opacity var(--dur-fast) linear; }
}