/* Design tokens lifted from the Frontal Lobe prototype.
   Change a value here, not in a template. */
:root {
  --ink:        #1E3A35;
  --ink-muted:  #5F817A;
  --ink-faint:  #9DB8B2;
  --primary:    #3D8C7F;
  --accent:     #70C1B3;
  --line:       #CFE7E1;
  --surface:    #FFFFFF;
  --surface-2:  #F7FCFB;
  --canvas:     #EDF7F4;
  --warn:       #C4694D;
  --warn-deep:  #9E4E36;
  --warn-soft:  #FBF1ED;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --step--1: 0.75rem;
  --step-0:  0.875rem;
  --step-1:  1rem;
  --step-2:  1.375rem;
  --step-3:  2rem;
  --step-4:  2.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.875rem;
  --space-4: 1.25rem;
  --space-5: 2rem;
  --space-6: 3rem;

  --radius-sm: 8px;
  --radius:   12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --measure: 1280px;

  /* Layered rather than one flat drop: a tight contact shadow plus a
     wider soft one is what separates a surface from a box with a
     border on it. */
  --shadow-1: 0 1px 2px rgba(30, 58, 53, 0.05),
              0 1px 3px rgba(30, 58, 53, 0.04);
  --shadow-2: 0 2px 4px rgba(30, 58, 53, 0.05),
              0 6px 16px rgba(30, 58, 53, 0.07);
  --shadow-3: 0 4px 8px rgba(30, 58, 53, 0.06),
              0 16px 32px rgba(30, 58, 53, 0.10);

  /* One duration and one curve, so nothing on the page moves at a
     different speed from anything else. The curve eases out hard: it
     feels responsive because most of the distance is covered early. */
  --dur: 160ms;
  --dur-slow: 260ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --ring: 0 0 0 3px rgba(61, 140, 127, 0.28);
}