/**
 * @file tokens.css
 * Design tokens for the Genero Rebrand palette (Figma node 5383:2130 —
 * the 6-color swatch board: 6 rectangles + 6 name labels + 6 hex labels).
 *
 * Two layers:
 *   1. Primitive — the raw palette values, named after their Figma labels.
 *   2. Semantic  — purpose-based names that reference the primitives, for
 *      use in components/CSS instead of reaching for a primitive directly.
 *
 * These same 6 colors already back theme.css's shadcn-style variables
 * (--foreground, --background, --border, --primary, --genero-slate,
 * --genero-band); this file is the explicit primitive → semantic layer
 * those values trace back to. Comments below cross-reference the
 * equivalent theme.css variable for each color.
 */

:root {
  /* --- Primitive tokens --- */
  --color-near-black: #0a0a0a;
  /* Primary */
  --color-blue-coal: #242b36;
  --color-deep-slate: #36434c;
  --color-frosted-cloud: #f2f7fa;
  /* Surface */
  --color-pale-ice-mist: #d4d9e1;
  --color-pure-white: #ffffff;
  /* Background */

  /* --- Semantic tokens --- */

  /* Text */
  --color-text-primary: var(--color-blue-coal);
  /* body/heading text; theme.css: --foreground */
  --color-text-strong: var(--color-near-black);
  /* highest-contrast text; theme.css: --primary */
  --color-text-muted: var(--color-deep-slate);
  /* secondary/muted text; theme.css: --genero-slate */
  --color-text-inverse: var(--color-pure-white);
  /* text on dark surfaces; theme.css: --primary-foreground */

  /* Background */
  --color-bg-default: var(--color-pure-white);
  /* page/card background; theme.css: --background */
  --color-bg-muted: var(--color-frosted-cloud);
  /* hover/highlight surface; theme.css: --genero-band */
  --color-bg-inverse: var(--color-near-black);
  /* dark surfaces (CTAs, footer); theme.css: --primary */

  /* Border */
  --color-border-default: var(--color-pale-ice-mist);
  /* default border/divider; theme.css: --border, --input */
  --color-border-strong: var(--color-deep-slate);
  /* higher-contrast border; theme.css: --genero-slate */

  /* Action (buttons/links) */
  --color-action-bg: var(--color-near-black);
  /* theme.css: --primary */
  --color-action-text: var(--color-pure-white);
  /* theme.css: --primary-foreground */

  /* --- Spacing: 8px Grid --- */
  --genero-theme-space-0: 0;
  --genero-theme-space-1: 0.25rem; /* 4px */
  --genero-theme-space-2: 0.5rem; /* 8px */
  --genero-theme-space-3: 0.75rem; /* 12px */
  --genero-theme-space-3x: 0.9375rem; /* 15px */
  --genero-theme-space-4: 1rem; /* 16px */
  --genero-theme-space-4x: 1.25rem; /* 20px */
  --genero-theme-space-5: 1.5rem; /* 24px */
  --genero-theme-space-6: 2rem; /* 32px */
  --genero-theme-space-7: 2.5rem; /* 40px */
  --genero-theme-space-8: 3rem; /* 48px */
  --genero-theme-space-9: 4rem; /* 64px */
  --genero-theme-space-10: 5rem; /* 80px */
  --genero-theme-space-11: 6rem; /* 96px */
  --genero-theme-space-12: 8rem; /* 128px */
  --genero-theme-space-13: 9.375rem; /* 150px */
  --genero-theme-space-16: 10rem; /* 160px */
  --genero-theme-space-20: 12rem; /* 192px */

  /* --- Layout: Containers --- */
  --genero-theme-container-xs: 100%;
  --genero-theme-container-sm: 576px;
  --genero-theme-container-md: 768px;
  --genero-theme-container-lg: 992px;
  --genero-theme-container-xl: 1200px;
  --genero-theme-container-2xl: 1280px;
  --genero-theme-container-content: 1272px;
  --genero-theme-container-max: 1348px;
  --genero-theme-container-wide: 1440px;
  --container-max-width: var(--genero-theme-container-max);
  --container-wide-width: var(--genero-theme-container-wide);

  /* --- Typography: Font Weights --- */
  --genero-theme-font-weight-light: 300;
  --genero-theme-font-weight-regular: 400;
  --genero-theme-font-weight-medium: 500;
  --genero-theme-font-weight-semibold: 600;
  --genero-theme-font-weight-bold: 700;
  --genero-theme-font-weight-extrabold: 800;
  --genero-theme-font-weight-black: 900;

  /* --- Typography: Font Sizes --- */
  --genero-theme-font-size-2xs: 0.5625rem; /* 9px */
  --genero-theme-font-size-xs3: 0.625rem; /* 10px */
  --genero-theme-font-size-xs: 0.6875rem; /* 11px */
  --genero-theme-font-size-xs2: 0.75rem; /* 12px */
  --genero-theme-font-size-xs4: 0.8125rem; /* 13px */
  --genero-theme-font-size-sm: 0.875rem; /* 14px */
  --genero-theme-font-size-sm2: 0.9375rem; /* 15px */
  --genero-theme-font-size-base: 1rem; /* 16px */
  --genero-theme-font-size-md: 1.25rem; /* 20px */
  --genero-theme-font-size-lg: 1.5rem; /* 24px */
  --genero-theme-font-size-xl: 2rem; /* 32px */
  --genero-theme-font-size-2xl: 2.25rem; /* 36px */
  --genero-theme-font-size-3xl: 2.5rem; /* 40px */
  --genero-theme-font-size-4xl: 3rem; /* 48px */
  --genero-theme-font-size-display: 3.125rem; /* 50px */
  --genero-theme-font-size-display2: 3.4375rem; /* 55px */
  --genero-theme-font-size-hero: 3.75rem; /* 60px */
  --genero-theme-font-size-display3: 4rem; /* 64px */
  --genero-theme-font-size-title: 5rem; /* 80px */
  --genero-theme-font-size-5xl: 6rem; /* 96px */
  --genero-theme-font-size-6xl: 7.125rem; /* 114px */
  --genero-theme-font-size-7xl: 8rem; /* 128px */
  --genero-theme-font-size-8xl: 12.5rem; /* 200px */
}