@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400&family=Montserrat:wght@500&display=swap");

:root {
  /*
   * E-Torch global brand theme
   * --------------------------------------------------------------------------
   * This is the single source of truth for brand values. Tailwind semantic
   * utilities in tailwind.config.js read these variables, and view components
   * should use those semantic utilities rather than hardcoded brand colors.
   *
   * Accessibility note:
   * Torch yellow (#FAAF43) is reserved for filled buttons, active states, badges,
   * highlights, and icons. It is not dark enough for normal text on white, so
   * --color-accent-text provides a darker accessible derivative for text.
   */

  /* Color palette */
  --color-white: #FFFFFF;
  --color-petrol-blue: #126379;
  --color-deep-blue: #172333;
  --color-torch-yellow: #FAAF43;
  --color-accent-text: #7A4200;
  --color-primary-hover: #0E5264;
  --color-primary-active: #0A3F4D;
  --color-primary-soft: #E8F2F5;
  --color-primary-subtle: #D2E6EC;
  --color-primary-border: #8DB9C5;
  --color-accent-hover: #E49A2D;
  --color-accent-active: #C47A10;
  --color-accent-soft: #FFF2DD;
  --color-accent-border: #FFD08B;

  /* Semantic colors */
  --color-background: var(--color-white);
  --color-surface: var(--color-white);
  --color-surface-muted: #F7FAFA;
  --color-primary: var(--color-petrol-blue);
  --color-accent: var(--color-torch-yellow);
  --color-text: #173038;
  --color-text-muted: #5D7178;
  --color-text-inverse: var(--color-white);
  --color-border: #CFE0E5;
  --color-focus: var(--color-torch-yellow);
  --color-disabled: #E7ECEE;
  --color-disabled-text: #7C8B90;
  --color-error: #B42318;
  --color-error-soft: #FEF3F2;
  --color-error-border: #FECACA;
  --color-success: #0F7A50;
  --color-success-soft: #ECFDF3;
  --color-success-border: #A7F3D0;
  --color-info: var(--color-petrol-blue);
  --color-info-soft: var(--color-primary-soft);
  --color-info-border: var(--color-primary-border);
  --color-warning: var(--color-accent-text);
  --color-warning-soft: var(--color-accent-soft);
  --color-warning-border: var(--color-accent-border);

  /* RGB channels for Tailwind opacity modifiers */
  --color-white-rgb: 255 255 255;
  --color-background-rgb: 255 255 255;
  --color-surface-rgb: 0 26 37;
  --color-surface-muted-rgb: 247 250 250;
  --color-primary-rgb: 18 99 121;
  --color-deep-blue-rgb: 23 35 51;
  --color-primary-hover-rgb: 14 82 100;
  --color-primary-active-rgb: 10 63 77;
  --color-primary-soft-rgb: 232 242 245;
  --color-primary-subtle-rgb: 210 230 236;
  --color-primary-border-rgb: 141 185 197;
  --color-accent-rgb: 250 175 67;
  --color-accent-hover-rgb: 228 154 45;
  --color-accent-active-rgb: 196 122 16;
  --color-accent-soft-rgb: 255 242 221;
  --color-accent-border-rgb: 255 208 139;
  --color-accent-text-rgb: 122 66 0;
  --color-text-rgb: 23 48 56;
  --color-text-muted-rgb: 93 113 120;
  --color-text-inverse-rgb: 255 255 255;
  --color-border-rgb: 207 224 229;
  --color-focus-rgb: 250 175 67;
  --color-error-rgb: 180 35 24;
  --color-error-soft-rgb: 254 243 242;
  --color-error-border-rgb: 254 202 202;
  --color-success-rgb: 15 122 80;
  --color-success-soft-rgb: 236 253 243;
  --color-success-border-rgb: 167 243 208;
  --color-info-rgb: 18 99 121;
  --color-warning-rgb: 122 66 0;
  --color-disabled-rgb: 231 236 238;
  --color-disabled-text-rgb: 124 139 144;

  /* Typography */
  --font-heading: "Montserrat", "Jost", system-ui, sans-serif;
  --font-body: "Jost", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-weight-heading: 500;
  --font-weight-body: 400;

  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Borders and radius */
  --border-width: 1px;
  --border-width-strong: 2px;
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(18 99 121 / 0.06);
  --shadow-sm: 0 1px 2px 0 rgb(18 99 121 / 0.08);
  --shadow-md: 0 4px 6px -1px rgb(18 99 121 / 0.12), 0 2px 4px -2px rgb(18 99 121 / 0.10);
  --shadow-lg: 0 10px 15px -3px rgb(18 99 121 / 0.14), 0 4px 6px -4px rgb(18 99 121 / 0.10);
  --shadow-xl: 0 20px 25px -5px rgb(18 99 121 / 0.16), 0 8px 10px -6px rgb(18 99 121 / 0.12);
  --shadow-focus: 0 0 0 3px rgb(250 175 67 / 0.45);

  /* Reusable component states */
  --state-hover-background: var(--color-primary-soft);
  --state-hover-text: var(--color-primary-hover);
  --state-active-background: var(--color-accent);
  --state-active-text: var(--color-primary-active);
  --state-focus-ring: var(--color-focus);
  --state-disabled-background: var(--color-disabled);
  --state-disabled-text: var(--color-disabled-text);
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
}

:focus-visible {
  outline: 2px solid var(--state-focus-ring);
  outline-offset: 2px;
}