/* ==========================================================================
   2G ENERGY RENTAL — Design Tokens
   Source: 2G Corporate Design Guidelines (handbook values)
   Do not add colors/fonts here that are not in the official guideline.
   ========================================================================== */

:root {

  /* ---- Brand colors --------------------------------------------------
     2G Green is the documented handbook value (Pantone 364 U).
     The logo artwork itself samples as #086628 on screen — if the logo
     ever needs to be color-matched pixel-for-pixel, --2g-green-logo-match
     is the ONE token to swap in. It is not used anywhere by default.
  ------------------------------------------------------------------- */
  --2g-green: #13641f;
  --2g-green-logo-match: #086628; /* reference only — not used by default */

  --gray-80: #58585a; /* default body text */
  --gray-60: #87888a;
  --gray-40: #b1b3b4; /* default border/divider color */
  --gray-10: #eceded; /* card/section surface tint */

  --light-green: #caffdb; /* soft tint ONLY — panels, hover tints, underline device. Never a CTA color. */

  --white: #ffffff;
  --black: #000000; /* shadow rgba mixing only — never a background */

  /* ---- Semantic colors -------------------------------------------------
     Mapped onto the approved brand/chart palette. Do not invent new hues.
  ------------------------------------------------------------------- */
  --color-success: var(--2g-green);
  --color-warning: #fbba00;
  --color-danger: #e20031;
  --color-info: #005d9d;

  /* ---- Chart / infographic palette -------------------------------------
     Official multi-color data palette. Use ONLY these for charts —
     never the brand green, which is reserved for UI chrome.
  ------------------------------------------------------------------- */
  --chart-orange-1: #ee7f01;
  --chart-orange-2: #fbba00;
  --chart-orange-3: #ffe163;

  --chart-red-1: #8c192e;
  --chart-red-2: #b80229;
  --chart-red-3: #e20031;

  --chart-purple-1: #841c41;
  --chart-purple-2: #c5006b;
  --chart-purple-3: #f4b4c1;
  --chart-purple-4: #c6b0d2;
  --chart-purple-5: #885995;
  --chart-purple-6: #5c3965;

  --chart-blue-1: #005d9d;
  --chart-blue-2: #178fc4;
  --chart-blue-3: #86c9eb;

  --chart-teal-1: #cae7e7;
  --chart-teal-2: #8bccc6;
  --chart-teal-3: #00a199;

  /* ---- Typography -------------------------------------------------------
     Noto Sans only. Bold = headlines/important, Regular = body/labels,
     Italic = intro/lead text. No condensed, no monospace, no other typeface.
  ------------------------------------------------------------------- */
  --font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-style-italic: italic;

  --text-h1: 2.5rem;    /* 40px */
  --text-h2: 2rem;       /* 32px */
  --text-h3: 1.5rem;     /* 24px */
  --text-h4: 1.25rem;    /* 20px */
  --text-body: 1rem;     /* 16px */
  --text-small: 0.875rem;/* 14px */
  --text-caption: 0.75rem;/* 12px */

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

  /* ---- Spacing scale (4px base) ----------------------------------------- */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */

  /* ---- Radius ------------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Shadow ------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* ---- Border ------------------------------------------------------------ */
  --border-color: var(--gray-40);
  --border-width: 1px;

  /* ---- Layout ------------------------------------------------------------
     --logo-clear-space is the minimum protection-zone padding required
     around the logo lockup on any background (see README).
  ------------------------------------------------------------------- */
  --container-max: 1200px;
  --logo-clear-space: 1.5rem; /* 24px */

  /* ---- Component compatibility aliases -------------------------------
     Components use this compact alias vocabulary. These aliases resolve
     only to approved tokens above; no bright accent CTA color is defined.
  ------------------------------------------------------------------- */
  --brand-primary: var(--2g-green);
  --brand-primary-hover: #0f4f18;
  --brand-accent: var(--2g-green); /* deprecated alias; use primary */
  --brand-accent-hover: #0f4f18;
  --font-sans: var(--font-family);
  --font-display: var(--font-family);
  --fs-display-m: var(--text-h1);
  --fs-body-lg: 1.125rem;
  --fs-body: var(--text-body);
  --fs-body-sm: var(--text-small);
  --fs-caption: var(--text-caption);
  --fs-overline: var(--text-caption);
  --fw-black: 900;
  --fw-bold: var(--font-weight-bold);
  --fw-semibold: 600;
  --fw-medium: 500;
  --ls-tight: -0.01em;
  --ls-wide: 0.08em;
  --ls-overline: var(--ls-wide);
  --green-900: #063f14;
  --green-700: var(--2g-green);
  --green-500: var(--2g-green);
  --green-400: var(--light-green);
  --green-200: var(--light-green);
  --text-strong: var(--gray-80);
  --text-muted: var(--gray-60);
  --text-subtle: var(--gray-60);
  --surface-card: var(--white);
  --surface-tint: var(--light-green);
  --surface-sunken: var(--gray-10);
  --border-default: var(--gray-40);
  --border-strong: var(--gray-80);
  --border-subtle: var(--gray-40);
  --shadow-focus: 0 0 0 3px var(--light-green);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --ease-standard: ease;
  --space-4: var(--space-md);
  --space-5: var(--space-lg);
  --space-6: var(--space-xl);
  --red: var(--color-danger);
  --status-available-bg: var(--light-green);
  --status-available-fg: var(--2g-green);
  --status-soon-bg: var(--gray-10);
  --status-soon-fg: var(--gray-60);
}