/* Amodo App design system — tokens
   The decisions in DESIGN_LOG.md as CSS custom properties.
   Consumers use these names; nothing here requires any tooling.
   Version 0.6.0 — see CHANGELOG.md. */

:root {
  /* Type — see DESIGN_LOG.md "Type" */
  --font-display: 'IBM Plex Serif', 'Iowan Old Style', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-display: 24px;    /* page title */
  --text-heading: 16px;    /* panel and section headings */
  --text-body: 14px;       /* everything read as sentences: prose, labels, controls */
  --text-small: 12px;      /* secondary text: hints, captions, table headers */
  --text-data: 13px;       /* mono, sits next to 14px body */
  --text-input: var(--text-body);       /* text inside inputs, selects and textareas; a profile may hold it apart from body */
  --text-input-data: var(--text-data);  /* the same for data inputs. Buttons take body. */

  --leading-display: 1.4;
  --leading-body: 1.5;

  --weight-display: 300;
  --weight-body: 400;
  --weight-emphasis: 500;

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.03em;   /* uppercase small text needs a little air */

  /* Spacing has no tokens. The scale (4, 6, 8, 12, 16, 24, 32, 48) and how each profile
     uses it are guidance in guide.html — see DESIGN_LOG.md "Spacing is guidance, not mechanism". */

  --control-height: 32px;  /* inputs, selects, buttons */

  /* Shape — see DESIGN_LOG.md "Shape" */
  --radius-control: 6px;   /* inputs, selects, textareas */
  --radius-inner: 10px;    /* things inside a card: stat tiles, menus, toasts */
  --radius-card: 14px;     /* cards, panels, dialogs, tables */
  --radius-pill: 999px;    /* buttons, chips */
  /* There are no shadows. Hairline borders separate surfaces; overlays sit on a dimmed backdrop. */

  /* Colour, light — see DESIGN_LOG.md "Colour (light)". Dark overrides follow the :root block. */
  --color-surface: #F5F3E7;          /* the ground: the website's cream, flat */
  --color-surface-raised: #FDFCF7;   /* cards, panels, sidebar, inputs: warm white, never pure white */
  --color-surface-sunken: #F0EEE2;   /* table headers, hovered rows */

  /* Slate is the ink: the quieter steps stay in its hue — see DESIGN_LOG.md "Ink and paper". */
  --color-text: #3E4E4D;             /* slate */
  --color-muted: #516260;            /* secondary text */
  --color-faint: #82908F;            /* hints, timestamps, placeholders */

  --color-border: rgba(0, 0, 0, 0.20);
  --color-border-soft: rgba(0, 0, 0, 0.08);

  --color-primary: #3E4E4D;          /* slate: the primary action */
  --color-primary-hover: #2E3A39;
  --color-on-primary: #FCF9ED;

  --color-danger: #A33325;           /* destructive actions, errors */
  --color-success: #3F7A46;
  --color-warning: #A87A1E;
  /* There is no info colour. Informational states use --color-muted. */

  --color-link: #CA4F3E;             /* brand terracotta: links and navigation items, "I'm going somewhere" */

  --color-selected: rgba(121, 188, 186, 0.25);  /* teal at low alpha: selected rows, items */
  --color-current: #79BCBA;          /* teal: marks the current navigation item, "where you are" */
  --color-focus: #79BCBA;

  /* Chart colours — see DESIGN_LOG.md "Chart colours". They carry no meaning: series identity
     in charts only, never used for interface chrome. In this order each stands apart from the next. */
  --color-data-1: #289F9D;           /* teal */
  --color-data-2: #BD4334;           /* terracotta */
  --color-data-3: #713C6D;           /* violet */
  --color-data-4: #A27D27;           /* gold */
  --color-data-5: #35699D;           /* blue: not a brand colour, so as late as the order allows */
  --color-data-6: #518A55;           /* sage */

  /* For ordered categories (durations, sizes, stages): one teal, least to most. */
  --color-ramp-1: #75C1BE;
  --color-ramp-2: #56A19F;
  --color-ramp-3: #368280;
  --color-ramp-4: #0E6563;
}

/* Colour, dark — see DESIGN_LOG.md "Colour (dark)". Same names, one for one. */
[data-theme="dark"] {
  --color-surface: #22211C;          /* the cream's shadow: a warm dark grey, not slate, not black */
  --color-surface-raised: #2C2B25;
  --color-surface-sunken: #27261F;

  /* Cream is the ink in dark: the quieter steps cool towards slate. */
  --color-text: #ECE9DD;             /* warm off-white, never pure white */
  --color-muted: #B3B6B0;
  --color-faint: #7E837F;

  --color-border: rgba(255, 255, 255, 0.18);
  --color-border-soft: rgba(255, 255, 255, 0.08);

  --color-primary: #ECE9DD;          /* slate on slate is invisible, so the primary becomes the cream */
  --color-primary-hover: #FFFFFF;
  --color-on-primary: #22211C;

  --color-danger: #DC6866;           /* lifted and cooled, so it separates from the link terracotta */
  --color-success: #7DAA80;
  --color-warning: #D9AE4B;

  --color-link: #DF6858;             /* terracotta lifted just enough; picked by eye against the danger red */

  --color-selected: rgba(121, 188, 186, 0.22);
  --color-current: #79BCBA;
  --color-focus: #79BCBA;

  /* About 80% of the light chroma, so the set doesn't glow on the dark ground; terracotta keeps its full chroma and gold takes a little more. */
  --color-data-1: #439593;
  --color-data-2: #CE5342;
  --color-data-3: #AF80AA;
  --color-data-4: #9E7E39;
  --color-data-5: #4F78A2;
  --color-data-6: #6F9D71;

  /* Reversed, so "least" is still the step nearest the ground. */
  --color-ramp-1: #0E6563;
  --color-ramp-2: #368280;
  --color-ramp-3: #56A19F;
  --color-ramp-4: #75C1BE;
}

/* Profile: Hand — see DESIGN_LOG.md "Profiles: Desk and Hand". A phone held in the
   hand: finger-sized controls, a smaller title, input text held at 16. Spacing is the designer's, per profile, from the guide. */
[data-profile="hand"] {
  --text-display: 20px;    /* body, small and data are the same in both profiles */
  --text-input: 16px;       /* held at 16: iOS Safari zooms a web view on focusing anything smaller. Buttons stay at body. */
  --text-input-data: 16px;
  --control-height: 44px;
}