/* ==========================================================================
   Nedama design tokens

   The single source of every colour, size and space on the site. Components
   never use raw values: they use these variables. Change a value here and the
   whole site follows.

   Colour rules
   - Amber is for fills and rules, never for text on white (contrast 2.2:1).
   - Text is ink (navy) on light backgrounds and white on ink.
   - No gradients. Shadows only through --shadow-card, on raised cards.
   ========================================================================== */

:root {
  /* Colour */
  --color-ink: #1A1A2E;            /* text and dark sections (logo navy) */
  --color-paper: #FFFFFF;          /* page background */
  --color-surface: #F6F5F1;        /* alternate section background */
  --color-text-muted: #55556A;     /* secondary text */
  --color-line: #DDDCD5;           /* hairlines and dividers */
  --color-border-input: #7C7C8C;   /* form field borders */
  --color-accent: #E8A020;         /* logo amber: fills, rules, buttons */
  --color-accent-tint: #FCF3E0;    /* callout background */
  --color-on-dark-muted: #B4B4C4;  /* secondary text on ink */
  --color-error: #B3261E;          /* error text */
  --color-error-surface: #FBECEA;  /* error message background */

  /* Dark theme palette. Used only through the theme roles below. */
  --color-night: #0E0E16;             /* page background */
  --color-night-surface: #161623;     /* alternate section background */
  --color-night-text: #EEEEF4;        /* text */
  --color-night-muted: #A7A7BC;       /* secondary text */
  --color-night-line: #2B2B40;        /* hairlines and dividers */
  --color-night-line-strong: #8A8AA0; /* tag, card and chip borders, form field borders */
  --color-night-error: #F28B82;       /* error text */

  /* Typefaces: IBM Plex, self-hosted. System fonts are the fallback. */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Type scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-footer-phone: 1rem;       /* footer links on phones: 16 px, so two columns fit at 360 px */
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --text-3xl: clamp(2.125rem, 1.6rem + 2vw, 3rem);
  --text-4xl: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;
  --measure: 65ch;                 /* comfortable reading width */

  /* Spacing (4px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --section-space: clamp(2.65rem, 1.5rem + 3vw, 4.85rem);    /* padding of every band (heroes have their own) */
  --section-space-tight: clamp(2.2rem, 1.1rem + 2.75vw, 3.85rem); /* tighter bands, on About */

  /* Layout */
  --container: 72rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --header-height: 4.5rem;
  --header-height-phone: 4rem;     /* the one-row header below 62rem, 64 px with its rule */
  --tap-target: 2.75rem;           /* 44 px: the smallest a control may be on a touch screen */
  /* How far below the top of the window anchors and the skip link land, so
     the sticky header never covers them. Set per width at the end of this file. */
  --header-offset: 5.5rem;

  /* Component sizes */
  --brand-mark-height: 2.25rem;
  --brand-mark-height-phone: 1.75rem;
  --toggle-size: 1.75rem;          /* the theme switch, about 28 px */
  --toggle-icon: 0.95rem;
  --toggle-inset: 0.6rem;          /* distance from the corner of the page */
  --menu-icon-width: 1.375rem;     /* the three lines of the Menu button */
  --menu-icon-gap: 0.375rem;       /* the space between them */

  /* Display type: the page titles in the heroes */
  --text-hero: clamp(2.5rem, 1.2rem + 3.6vw, 4rem);
  --text-page-title: clamp(2.25rem, 1.2rem + 3vw, 3.5rem);
  --text-wordmark: 1.7rem;         /* platform names written as text in a logo tile */
  --text-brand-sub: 0.62rem;       /* "INTEGRATED SOLUTIONS" under the name in the lockup */
  --tracking-caps: 0.14em;         /* letter spacing of small capitals */
  --leading-display: 1.05;
  --tracking-wordmark: 0.02em;
  --illustration-label-phone: 21px; /* labels inside the flow illustration on phones */

  /* Heroes */
  --hero-space-top: clamp(2.5rem, 1rem + 5vw, 6rem);
  --hero-space-bottom: clamp(3rem, 1rem + 6vw, 7rem);
  --page-hero-space-top: clamp(2rem, 1rem + 3vw, 4.5rem);
  --page-hero-space-bottom: clamp(2.5rem, 1rem + 4vw, 5rem);
  --hero-art-max: 26rem;           /* illustration beside an inner page title */
  --hero-art-wide: 34rem;          /* the larger plant scene on About */
  --hero-art-phone: 16rem;         /* an inner page's illustration on phones, under the text */
  --band-art-max: 22rem;           /* the illustration in a navy panel on the home page */

  /* Text widths */
  --section-head-width: 44rem;
  --lead-width: 40rem;
  --cta-text-width: 38rem;

  /* Grids: the narrowest a card or tile may get before the grid wraps */
  --card-min: 19rem;
  --story-min: 22rem;
  --caps-min: 20rem;
  --tile-min: 12.5rem;
  --logo-min: 10.5rem;
  --process-min: 11.5rem;
  --glance-min: 11rem;
  --principle-min: 15rem;
  --reason-number: 3rem;           /* the column for the numbers of the founder's reasons */
  --message-height: 9rem;          /* the message box on the contact form */
  --table-note-min: 14rem;         /* the wrapping last column of a scrolling table on phones */

  /* Illustration panels: the navy area and the drawing inside it */
  --card-art-panel: 11.5rem;
  --card-art: 9.5rem;
  --tile-art-panel: 9rem;
  --tile-art: 6.5rem;
  --feature-art-panel: 18rem;
  --feature-art-panel-phone: 12rem;
  --story-art-panel: 15rem;
  --story-row-art: clamp(16rem, 38%, 23rem);   /* a module row's panel: a three-column card wide, narrower on tablets */
  --wide-art-max: 30rem;
  --feature-art-max-height: 15rem;
  --story-art-max-height: 13rem;

  /* Logo tiles and the badge */
  --logo-tile-height: 8.5rem;
  --logo-tile-height-phone: 6.5rem; /* shorter on phones, where the tiles stack */
  --logo-height: 2.6rem;
  --badge-height: 10rem;

  /* Raised cards: the At a glance tiles lift over the bottom of the About hero */
  --hero-lift-space: clamp(4.5rem, 3rem + 5vw, 7rem);   /* the hero's deeper bottom padding */
  --lift-overlap: clamp(3rem, 2rem + 3vw, 4.5rem);      /* how far the tiles reach into the hero */
  --card-logo-height: 3.5rem;      /* the logo in the integrator card */

  /* Small marks: tag padding, arrows and chevrons */
  --tag-pad-y: 0.125rem;
  --arrow-size: 0.55em;
  --chevron-size: 0.6em;

  /* Shape and motion */
  --radius: 2px;
  --border: 1px;
  --border-medium: 2px;            /* menu underline, arrows */
  --border-thick: 3px;             /* amber accent rules */
  --duration: 150ms;
  --ease: ease;
}

/* ==========================================================================
   Theme roles

   Components colour the page through these roles, never through the palette
   directly, so one set of rules serves both themes. Navy brand panels, amber
   and the callout tint stay the same in both themes and use the palette.

   Dark applies when the visitor chooses it (data-theme="dark" on <html>), or
   when the device prefers dark and the visitor has not chosen. The attribute
   selectors are not tied to <html>, so a part of a page can show the other
   theme, as the style guide does. Keep the two dark blocks identical: the
   tests compare them.

   --shadow-card is the only shadow on the site, for cards that are raised
   off the page, such as the At a glance tiles. Its colours live here only.

   --logo-on-light-display and --logo-on-dark-display show one file of an
   official logo pair: the vendor's version for light or for dark backgrounds.
   ========================================================================== */

:root,
[data-theme="light"] {
  --theme-bg: var(--color-paper);
  --theme-bg-alt: var(--color-surface);
  --theme-text: var(--color-ink);
  --theme-text-muted: var(--color-text-muted);
  --theme-rule: var(--color-line);
  --theme-rule-strong: var(--color-ink);
  --theme-error: var(--color-error);
  --theme-field-border: var(--color-border-input);
  --shadow-card: 0 1px 2px rgba(26, 26, 46, 0.06), 0 10px 28px rgba(26, 26, 46, 0.1);
  --logo-on-light-display: inline-flex;
  --logo-on-dark-display: none;
  color-scheme: light;
}

[data-theme="dark"] {
  --theme-bg: var(--color-night);
  --theme-bg-alt: var(--color-night-surface);
  --theme-text: var(--color-night-text);
  --theme-text-muted: var(--color-night-muted);
  --theme-rule: var(--color-night-line);
  --theme-rule-strong: var(--color-night-line-strong);
  --theme-error: var(--color-night-error);
  --theme-field-border: var(--color-night-line-strong);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.55);
  --logo-on-light-display: none;
  --logo-on-dark-display: inline-flex;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --theme-bg: var(--color-night);
    --theme-bg-alt: var(--color-night-surface);
    --theme-text: var(--color-night-text);
    --theme-text-muted: var(--color-night-muted);
    --theme-rule: var(--color-night-line);
    --theme-rule-strong: var(--color-night-line-strong);
    --theme-error: var(--color-night-error);
    --theme-field-border: var(--color-night-line-strong);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.55);
    --logo-on-light-display: none;
    --logo-on-dark-display: inline-flex;
    color-scheme: dark;
  }
}

/* Below 62rem the header is one shorter row, with the menu behind a button. */
@media (max-width: 62rem) {
  :root {
    --header-offset: 5rem;
  }
}