/* Himalaya Packaging — design tokens. Light theme only.
   Contrast ratios are measured; see the notes at the end before changing a colour. */

:root {

  /* Type: Archivo for headings and UI, IBM Plex Mono for data (specs, labels, tags) */
  --font:      'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Ink */
  --ink:       #14171A;   /* headings, dark surfaces          17.99 on white */
  --text-body: #444B54;   /* body copy                         8.82 on white */
  --muted:     #626A73;   /* small secondary text              5.49 on white */
  --faint:     #69717A;   /* small labels, tags                4.95 on white */
  --line:      #DDE1E6;   /* cool hairline                                   */
  --line-2:    #C4CAD1;
  --line-3:    #AAB2BB;   /* emphasised rules                                */

  /* Grounds */
  --white:     #FFFFFF;
  --paper:     #F6F7F9;   /* alternating section band                        */
  --band:      #EDEFF2;   /* deeper band / sunken surfaces                   */

  /* Brand accents (from the logo) — fills and large display type only */
  --orange:    #F16236;
  --amber:     #F5AC32;
  --crimson:   #C93446;
  --magenta:   #B1346E;

  --orange-ink:  #B33D14;  /* links + solid buttons w/ white   5.84 AA       */
  --orange-tint: #FBEBE6;  /* icon-chip ground behind --orange-ink           */

  /* Gradients */
  --grad-sun:  linear-gradient(135deg, var(--amber), var(--orange));
  --grad-full: linear-gradient(90deg, var(--amber) 0%, var(--orange) 33%,
                               var(--crimson) 66%, var(--magenta) 100%);

  /* Radii */
  --r-sm:   3px;
  --r-md:   5px;
  --r-lg:   8px;
  --btn-radius: 4px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(20, 23, 26, .06), 0 1px 1px rgba(20, 23, 26, .04);
  --shadow-sm: 0 2px 4px rgba(20, 23, 26, .06), 0 4px 12px -6px rgba(20, 23, 26, .12);
  --shadow:    0 4px 8px rgba(20, 23, 26, .07), 0 18px 36px -20px rgba(20, 23, 26, .22);
  --shadow-glow: 0 6px 16px -8px rgba(179, 61, 20, .45);

  /* Industry colours */
  --v-automotive:   #F5AC32;
  --v-ceramics:     #F16236;
  --v-engineering:  #C93446;
  --v-agri:         #B1346E;

  /* Roles */
  --text:        var(--text-body);
  --text-strong: var(--ink);
  --text-muted:  var(--muted);
  --text-faint:  var(--faint);

  --accent:      var(--orange-ink);   /* links + small-text accent            */
  --accent-btn:  var(--orange-ink);   /* button fill w/ white text            */

  --focus: #1D5FA8;
  --wa:    #25D366;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Contrast (white / paper):
   amber as text 1.94 / 1.81 — fails; fills and 28px+ only (9.28 on ink).
   orange as text 3.21 / 3.00 — fails on paper; small text uses --orange-ink (5.84).
   faint 4.95 / 4.62 — the floor for small labels.
   Orange fills take ink text (5.60), never white; orange-ink + white = 5.84. */