/* =============================================================================
   SolarLead Cyprus — prototype design tokens
   Jira: SCRUM-36 (subtask of SCRUM-26)

   Scope: this is the token layer for the DISPOSABLE homeowner prototype. It is
   deliberately small. Its job is to make the approved visual decisions explicit
   so they map cleanly onto MudBlazor (web) and QuestPDF (report) later, instead
   of being re-invented or re-argued.

   MudBlazor mapping (fill in MudTheme.PaletteLight from the right-hand column):

     Palette.Primary          --brand-600
     Palette.PrimaryContrast  --brand-on
     Palette.Secondary        --accent-600
     Palette.Success          --status-good
     Palette.Warning          --status-warning
     Palette.Error            --status-critical
     Palette.Surface          --surface-1
     Palette.Background       --surface-0
     Palette.TextPrimary      --ink-1
     Palette.TextSecondary    --ink-2
     Palette.Divider          --line-1
     LayoutProperties.*Radius --radius-md
     Typography.*.FontFamily  --font-sans
     Breakpoints              --bp-* below are MudBlazor's own values

   Deliberate omissions, so nobody looks for them:
   - No dark mode. The prototype is reviewed as deterministic light-mode
     screenshots; the real dark theme belongs to the MudBlazor theme, not here.
   - No utility-class framework. Components own their styles (components.css).
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------- type -- */
  /* One system sans throughout, including figures. No display face. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  /* Minor-third-ish scale, capped at 9 steps. rem-based so browser zoom and
     user font-size settings are respected (accessibility). */
  --text-xs: 0.75rem;    /* 12px — legal, captions, axis ticks */
  --text-sm: 0.875rem;   /* 14px — help text, labels */
  --text-md: 1rem;       /* 16px — body, input text (never smaller on mobile) */
  --text-lg: 1.125rem;   /* 18px — lead paragraph */
  --text-xl: 1.375rem;   /* 22px — card / section heading */
  --text-2xl: 1.75rem;   /* 28px — screen heading */
  --text-3xl: 2.25rem;   /* 36px — landing h1 (mobile) */
  --text-4xl: 3rem;      /* 48px — landing h1 (desktop), hero figure */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

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

  /* Tabular figures are reserved for aligned columns (tables, axis ticks).
     Hero numbers use default proportional figures. */
  --figures-tabular: tabular-nums;

  /* -------------------------------------------------------------- spacing -- */
  /* 4px base. Only these steps — no arbitrary margins. */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  --radius-sm: 0.375rem;  /*  6 — inputs, chips */
  --radius-md: 0.625rem;  /* 10 — buttons, cards */
  --radius-lg: 1rem;      /* 16 — hero panels */
  --radius-full: 999px;

  --shadow-1: 0 1px 2px rgba(11, 11, 11, 0.06);
  --shadow-2: 0 2px 8px rgba(11, 11, 11, 0.08);
  --shadow-3: 0 8px 24px rgba(11, 11, 11, 0.10);

  /* --------------------------------------------------------------- colour -- */
  /* Brand ramp = the validated sequential blue. Primary is blue rather than the
     obvious solar yellow because yellow cannot carry 3:1 contrast on a light
     surface; yellow is used for the PV-production series only, where direct
     labels provide the required relief. */
  --brand-100: #cde2fb;
  --brand-200: #9ec5f4;
  --brand-400: #3987e5;
  --brand-500: #256abf;
  --brand-600: #184f95;
  --brand-700: #0d366b;
  --brand-on: #ffffff;      /* text/icon colour on --brand-500/600 */

  --accent-600: #1baf7a;    /* aqua — secondary actions, "saving" accents */

  /* Surfaces & ink */
  --surface-0: #f9f9f7;     /* page plane */
  --surface-1: #ffffff;     /* card / chart surface */
  --surface-2: #f2f4f7;     /* inset, skeleton, disabled field */
  --ink-1: #0b0b0b;         /* primary text */
  --ink-2: #52514e;         /* secondary text */
  --ink-3: #898781;         /* muted — axis labels, captions */
  --line-1: #e1e0d9;        /* hairline / gridline */
  --line-2: #c3c2b7;        /* baseline, input border */

  /* Status — reserved. Never reused as a chart series colour. Always shipped
     with an icon + label so colour is never the only carrier of meaning. */
  --status-good: #0ca30c;
  --status-good-text: #006300;   /* the >=4.5:1 text step of the same hue */
  --status-good-bg: #e8f6e8;
  --status-warning: #fab219;
  --status-warning-text: #7a5200;
  --status-warning-bg: #fdf3dd;
  --status-critical: #d03b3b;
  --status-critical-text: #a32020;
  --status-critical-bg: #fbeaea;

  /* Focus ring — 3:1 against both surface and brand fills. */
  --focus-ring: 0 0 0 3px rgba(37, 106, 191, 0.35);

  /* ---------------------------------------------------------------- chart -- */
  /* Categorical slots for this product, validated as a set against #ffffff.
     Two guarantees, both now checkable — run `node scripts/validate_palette.js`,
     which reads these values rather than restating them:

       - adjacent slots stay >=12 ΔE apart under dichromacy, worst case protan,
         and clear it by an order of magnitude;
       - `--chart-production` is 2.17:1 on white, below the 3:1 bar, so the relief
         rule applies: both series carry visible direct labels wherever they appear.

     The ΔE figure itself is deliberately not repeated here. It was recorded as
     123.7 and the script computes 128.9 from the same colours — that is which
     dichromacy matrix you pick, not a palette that moved, and freezing either
     number in a comment is how this claim became uncheckable in the first place.
     The threshold is the promise; the script prints the measurement. */
  --chart-production: #eda100;   /* PV generation */
  --chart-consumption: #2a78d6;  /* household demand */
  --chart-grid: #e1e0d9;         /* recessive hairline */
  --chart-axis: #c3c2b7;
  --chart-label: #898781;
  --chart-track: #e9edf3;        /* meter track — same ramp, near-surface step */

  /* --------------------------------------------------------- breakpoints -- */
  /* MudBlazor's own breakpoint values, so the prototype's responsive decisions
     transfer without re-tuning. Used via @media in components.css. */
  --bp-sm: 600px;
  --bp-md: 960px;
  --bp-lg: 1280px;

  --measure: 68ch;          /* max line length for body copy */
  --container: 1120px;      /* max content width */
  --touch-min: 44px;        /* minimum interactive target (WCAG 2.5.5) */
}

/* Respect users who ask for less motion — applies to skeletons and transitions. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}