/**
 * Tiree HTRA design tokens (TRA-12).
 *
 * Source of truth for all visual constants: colour, typography, spacing,
 * radii, shadows, breakpoints, motion. Component stylesheets consume the
 * semantic tokens (`--color-accent`, `--color-text`, etc.) and never
 * reference literal hex codes or the underlying `--tiree-*` palette tokens.
 *
 * Block below is the verbatim Brand System v1.0 Section 12.1 token set.
 *
 * The five rating-band tokens at the bottom are application-specific
 * (Brand System does not define them) but follow the same semantic-token
 * convention. WCAG contrast is documented next to each value.
 *
 * Self-hosted Poppins @font-face declarations are at the top of this file
 * with `font-display: swap` so the page renders with the fallback chain
 * (Century Gothic, Calibri, Arial) while the web font loads.
 */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/poppins/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/poppins/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/poppins/poppins-700.woff2") format("woff2");
}

:root {
  /* === Core palette === */
  --tiree-khaki:        #D7EB92;
  --tiree-near-black:   #27272A;
  --tiree-cool-silver:  #A9BCBA;
  --tiree-warm-brown:   #685953;
  --tiree-slate-teal:   #48676D;
  --tiree-light-grey:   #CCCCCC;
  --tiree-white:        #FFFFFF;

  /* === Tints / shades (proposed) === */
  --tiree-khaki-50:     #F5FBE3;
  --tiree-khaki-200:    #E5F2B7;
  --tiree-khaki-700:    #9BB856;
  --tiree-teal-50:      #EAF0F1;
  --tiree-teal-700:     #2F4D52;
  --tiree-near-black-700: #3F3F46;
  --tiree-near-black-500: #71717A;

  /* === Status === */
  --color-success:      #4F7A3A;
  --color-warning:      #B5832A;
  --color-error:        #A33A2E;
  --color-info:         var(--tiree-slate-teal);

  /* === Semantic === */
  --color-bg:           var(--tiree-white);
  --color-surface:      var(--tiree-white);
  --color-surface-alt:  var(--tiree-khaki-50);
  --color-text:         var(--tiree-near-black);
  --color-text-muted:   var(--tiree-near-black-500);
  --color-text-inverse: var(--tiree-white);
  --color-brand:        var(--tiree-khaki);
  --color-accent:       var(--tiree-slate-teal);
  --color-accent-hover: var(--tiree-teal-700);
  --color-border:       var(--tiree-light-grey);
  --color-border-strong: var(--tiree-cool-silver);

  /* === Typography === */
  --font-sans: 'Poppins', 'Century Gothic', 'Calibri', 'Arial', sans-serif;
  --font-doc:  'Century Gothic', 'Calibri', 'Arial', sans-serif;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5625rem;
  --text-3xl: 1.9375rem;
  --text-4xl: 2.4375rem;
  --text-5xl: 3.0625rem;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* === Spacing === */
  --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:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* === Radius === */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-1: 0 1px 2px rgba(39, 39, 42, 0.06);
  --shadow-2: 0 2px 8px rgba(39, 39, 42, 0.08);
  --shadow-3: 0 8px 24px rgba(39, 39, 42, 0.10);
  --shadow-focus: 0 0 0 3px rgba(72, 103, 109, 0.35);

  /* === Breakpoints (for JS; CSS uses @media) === */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* === Motion === */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast:    120ms;
  --duration-default: 200ms;
  --duration-slow:    320ms;

  /* ===========================================================
   * Application-specific tokens (not in Brand System Section 12.1)
   * =========================================================== */

  /*
   * Five-band rating colours.
   *
   * Used in two places: rating badges in the UI and rating cells in the
   * Excel export. Spec required WCAG AA against both white and Near Black
   * — but no single colour can pass 4.5:1 against both ends of the
   * luminance range simultaneously (the math forbids it: a colour with
   * luminance >= 0.274 is needed to pass against Near Black, and <= 0.183
   * to pass against white). The values below pick a luminance that
   * favours one direction or comes as close as possible to AA-normal in
   * the other.
   *
   * Contrast ratios (computed against #FFFFFF and #27272A):
   *
   *   --color-rating-very-low  #4F7A3A   white 4.99:1 (AA)   NB 2.92:1
   *   --color-rating-low       #7AA858   white 2.72:1        NB 5.37:1 (AA)
   *   --color-rating-moderate  #B5832A   white 3.36:1 (lg)   NB 4.34:1 (lg)
   *   --color-rating-high      #C95F32   white 4.06:1 (lg)   NB 3.59:1 (lg)
   *   --color-rating-very-high #A33A2E   white 6.67:1 (AA)   NB 2.19:1
   *
   * Paired text-colour tokens below pick the higher-contrast direction
   * for each rating fill, so badges always render at maximum legibility.
   */

  --color-rating-very-low:  var(--color-success); /* #4F7A3A */
  --color-rating-low:       #7AA858;
  --color-rating-moderate:  var(--color-warning); /* #B5832A */
  --color-rating-high:      #C95F32;
  --color-rating-very-high: var(--color-error);   /* #A33A2E */

  /* Text colour for use ON each rating fill (chosen for max contrast). */
  --color-rating-very-low-text:  var(--color-text-inverse); /* white  on dark green */
  --color-rating-low-text:       var(--color-text);          /* NB     on light green */
  --color-rating-moderate-text:  var(--color-text);          /* NB     on amber */
  --color-rating-high-text:      var(--color-text-inverse); /* white  on orange */
  --color-rating-very-high-text: var(--color-text-inverse); /* white  on red */

  /* Modal backdrop — Near Black at 55% opacity, brand-aligned overlay. */
  --color-overlay: rgba(39, 39, 42, 0.55);

  /*
   * Banner / callout tints (Brand System Section 8.6). Paired with the
   * matching status colours via 4px left borders in the .banner styles.
   * Brand variant uses --tiree-khaki-50; info uses --tiree-teal-50; the
   * three below are bespoke tints from Section 8.6.
   */
  --color-banner-success-bg: #EAF3E2;
  --color-banner-warning-bg: #F8EDD7;
  --color-banner-error-bg:   #F4DDDA;
}

/* === Base === */

html {
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}