/* Localization & Export Forum — tokens.css
   Generated for this canvas from the design system's tokens.json (v1, light theme).
   The system's README names tokens.css but the system does not ship it, so this file
   rebuilds it 1:1 from tokens.json: every token becomes --<token-name>. */
:root {
  /* primitives */
  --forest: #014b3e; --forest-mid: #2c8c79; --forest-light: #9bccc2;
  --green: #28ac4a; --green-mid: #59d16f; --green-light: #c5eacd;
  --ink: #091915; --white: #ffffff;
  --mist: #9cc0cc; --mist-mid: #c5e1e8; --mist-light: #e9faff;
  --gray: #808080; --gray-mid: #a3a3a3; --gray-light: #d6d6d6;
  --gold: #c8a264; --gold-mid: #e3d1b2; --gold-light: #f1e8d8;
  --paper: #fafafa; --paper-sunken: #f2f2f2;
  --logo-ink: #243f27; --logo-black: #252020; --moe-green: #173f35;
  --forest-deep: #04372e; --teal-text: #1f7867; --neutral-text: #4a5250;
  --gold-text: #685e3c; --mist-text: #445c5e;
  --ink-surface: #072821; --ink-raised: #05322a; --ink-sunken: #06100e; --ink-line: #263d38;
  --danger: #b42318; --danger-light: #fdeceb; --danger-soft: #ff9b8f;
  --success-deep: #0f3620; --warning-deep: #2b3223; --info-deep: #213432; --danger-deep: #3c1c16;

  /* semantic (light) */
  --bg-page: var(--paper); --bg-surface: var(--white); --bg-sunken: var(--paper-sunken);
  --bg-raised: var(--white); --bg-brand: var(--forest); --bg-brand-mid: var(--forest-mid);
  --bg-accent-subtle: var(--green-light); --bg-gold-subtle: var(--gold-light); --bg-mist-subtle: var(--mist-light);
  --fg: var(--forest); --fg-strong: var(--ink); --fg-muted: var(--teal-text); --fg-subtle: var(--neutral-text);
  --fg-on-brand: var(--white); --fg-on-accent: var(--ink); --fg-gold: var(--gold-text);
  --link: var(--forest); --link-hover: var(--ink);
  --border: var(--gray-light); --border-strong: var(--gray);
  --action-primary: var(--forest); --action-primary-hover: var(--forest-deep); --on-action-primary: var(--white);
  --accent: var(--green); --indicator: var(--forest); --on-indicator: var(--white); --gold-accent: var(--gold);
  --focus-ring: var(--forest); --focus-ring-inverse: var(--green-mid);
  --success-fg: var(--forest); --success-bg: var(--green-light); --success-border: var(--green);
  --info-fg: var(--mist-text); --info-bg: var(--mist-light); --info-border: var(--mist);
  --warning-fg: var(--gold-text); --warning-bg: var(--gold-light); --warning-border: var(--gold);
  --danger-fg: var(--danger); --danger-bg: var(--danger-light); --danger-border: var(--danger);
  --tier-visitor: var(--green); --tier-project-team: var(--gold); --tier-delegate: var(--mist);
  --scrim: rgba(9, 25, 21, 0.6);

  /* type */
  --font-sans: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;

  /* spacing */
  --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --margin-page-ratio: 4.2%;

  /* radius */
  --radius-none: 0px; --radius-xs: 3px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 22px; --radius-pill: 9999px; --radius-round: 50%;

  /* shadow */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(9, 25, 21, 0.08), 0 1px 3px rgba(9, 25, 21, 0.06);
  --shadow-md: 0 8px 24px rgba(9, 25, 21, 0.12);
  --shadow-lg: 0 24px 48px rgba(9, 25, 21, 0.18);

  /* gradients */
  --gradient-brand: linear-gradient(140deg, #808080 0%, #28ac4a 44%, #c8a264 100%);
  --gradient-logo: linear-gradient(212deg, #c8a264 0%, #28ac4a 50%, #808080 90%);
  --gradient-heading: linear-gradient(180deg, #28ac4a 0%, #c8a264 100%);
  --gradient-band: linear-gradient(90deg, #2c8c79 0%, #014b3e 100%);
  --gradient-hero: linear-gradient(180deg, #f2f2f2 0%, #f2f2f2 35%, #a0c695 100%);
  --gradient-card-green: linear-gradient(160deg, #ffffff 0%, #c5eacd 100%);
  --gradient-card-gold: linear-gradient(160deg, #ffffff 0%, #e3d1b2 100%);
  --gradient-card-gray: linear-gradient(160deg, #ffffff 0%, #d6d6d6 100%);
  --gradient-badge: linear-gradient(180deg, #ffffff 0%, #ffffff 30%, #c5eacd 55%, #28ac4a 100%);
  --gradient-screen: linear-gradient(180deg, #091915 0%, #091915 40%, #2c8c79 100%);

  /* breakpoints, grid */
  --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px;
  --grid-columns-sm: 4; --grid-columns-md: 8; --grid-columns-lg: 12;
  --grid-gutter-sm: 16px; --grid-gutter-lg: 24px;
  --grid-margin-sm: 16px; --grid-margin-md: 32px; --grid-margin-lg: 4.2%;
  --container-max: 1280px; --measure-max: 68ch;

  /* motion */
  --duration-instant: 0ms; --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* layers */
  --z-header: 100; --z-dropdown: 200; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700;

  /* sizes, borders, opacity */
  --control-sm: 32px; --control-md: 44px; --control-lg: 52px;
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 48px; --touch-min: 44px;
  --border-hairline: 1px; --border-control: 1px; --border-focus: 2px; --border-indicator: 3px;
  --opacity-disabled: 0.45; --opacity-motif-quiet: 0.35;
}

/* type styles (tokens.json → type.groups) */
.display { font-size: 64px; line-height: 68px; font-weight: 500; }
.heading-section { font-size: 48px; line-height: 52px; font-weight: 300; }
.h1 { font-size: 40px; line-height: 48px; font-weight: 700; }
.h2 { font-size: 32px; line-height: 40px; font-weight: 700; }
.h3 { font-size: 24px; line-height: 32px; font-weight: 600; }
.h4 { font-size: 20px; line-height: 28px; font-weight: 600; }
.body-lg { font-size: 18px; line-height: 30px; font-weight: 400; }
.body { font-size: 16px; line-height: 26px; font-weight: 400; }
.body-sm { font-size: 14px; line-height: 22px; font-weight: 400; }
.label { font-size: 14px; line-height: 20px; font-weight: 500; }
.caption { font-size: 12px; line-height: 18px; font-weight: 400; }
.overline { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.numeral { font-size: 56px; line-height: 60px; font-weight: 400; }
.display-ar { font-size: 64px; line-height: 88px; font-weight: 600; }
.h1-ar { font-size: 40px; line-height: 60px; font-weight: 700; }
.h2-ar { font-size: 32px; line-height: 48px; font-weight: 700; }
.h3-ar { font-size: 24px; line-height: 38px; font-weight: 600; }
.body-lg-ar { font-size: 18px; line-height: 32px; font-weight: 400; }
.body-ar { font-size: 16px; line-height: 28px; font-weight: 400; }
.body-sm-ar { font-size: 14px; line-height: 24px; font-weight: 400; }
.label-ar { font-size: 14px; line-height: 22px; font-weight: 500; }
.caption-ar { font-size: 12px; line-height: 20px; font-weight: 400; }