/* Central Rade brand palette. Derived tones mix only these approved swatches. */
/* Typography tokens (ADR-0040) — the single source for type across theme, plugins and landing pages. */
:root,
:host {
  --rade-font-family-text: "Vazirmatn";
  --rade-shadow-opacity: 100%;

  /* Scale: Figma «Typography» (file rade, node 305:558) — size / line-height pairs */
  --rade-font-size-72: 72px;  --rade-line-height-72: 88px;
  --rade-font-size-64: 64px;  --rade-line-height-64: 80px;
  --rade-font-size-56: 56px;  --rade-line-height-56: 72px;
  --rade-font-size-48: 48px;  --rade-line-height-48: 64px;
  --rade-font-size-40: 40px;  --rade-line-height-40: 56px;
  --rade-font-size-32: 32px;  --rade-line-height-32: 44px;
  --rade-font-size-28: 28px;  --rade-line-height-28: 40px;
  --rade-font-size-24: 24px;  --rade-line-height-24: 36px;
  --rade-font-size-20: 20px;  --rade-line-height-20: 32px;
  --rade-font-size-18: 18px;  --rade-line-height-18: 28px;
  --rade-font-size-16: 16px;  --rade-line-height-16: 24px;
  --rade-font-size-14: 14px;  --rade-line-height-14: 22px;
  --rade-font-size-12: 12px;  --rade-line-height-12: 18px;
  --rade-font-size-10: 10px;  --rade-line-height-10: 16px;

  /* Weights: Figma defines Regular / Medium / Bold; the rest remain for existing components */
  --rade-font-weight-regular: 400;
  --rade-font-weight-medium: 500;
  --rade-font-weight-bold: 700;

  /* Roles — use these in components, not the raw scale. Desktop values; mobile overrides below. */
  --rade-text-h1-size: var(--rade-font-size-28);  --rade-text-h1-line: var(--rade-line-height-28);
  --rade-text-h2-size: var(--rade-font-size-24);  --rade-text-h2-line: var(--rade-line-height-24);
  --rade-text-h3-size: var(--rade-font-size-20);  --rade-text-h3-line: var(--rade-line-height-20);
  --rade-text-h4-size: var(--rade-font-size-18);  --rade-text-h4-line: var(--rade-line-height-18);
  --rade-text-h5-size: var(--rade-font-size-16);  --rade-text-h5-line: var(--rade-line-height-16);
  --rade-text-h6-size: var(--rade-font-size-14);  --rade-text-h6-line: var(--rade-line-height-14);
  --rade-text-heading-weight: var(--rade-font-weight-bold);

  /* Long-form content (archive/service descriptions, articles, pages): Body/16 with a looser
     line for Persian paragraphs */
  --rade-text-prose-size: var(--rade-font-size-16);
  --rade-text-prose-line: 1.9;
  --rade-text-body-size: var(--rade-font-size-14);   /* UI text */
  --rade-text-body-line: 1.7;
  --rade-text-caption-size: var(--rade-font-size-12); --rade-text-caption-line: var(--rade-line-height-12);

  /* Legacy names (r-fs-* utilities, older components) mapped onto the scale */
  --rade-type-size-root: 14px;
  --rade-type-size-1: var(--rade-font-size-10);
  --rade-type-size-2: var(--rade-font-size-12);
  --rade-type-size-3: var(--rade-font-size-14);
  --rade-type-size-4: var(--rade-font-size-16);
  --rade-type-size-5: var(--rade-font-size-20);
  --rade-type-size-6: var(--rade-font-size-24);
  --rade-type-size-7: var(--rade-font-size-32);
  --rade-type-size-md-7: var(--rade-font-size-40);
  --rade-type-size-h1: var(--rade-text-h1-size);
  --rade-type-size-h2: var(--rade-text-h2-size);
  --rade-type-size-h3: var(--rade-text-h3-size);
  --rade-type-size-small: var(--rade-font-size-10);
  --rade-type-weight-regular: var(--rade-font-weight-regular);
  --rade-type-weight-medium: var(--rade-font-weight-medium);
  --rade-type-weight-semibold: 600;
  --rade-type-weight-bold: var(--rade-font-weight-bold);
  --rade-type-weight-extrabold: 800;
  --rade-type-weight-black: 900;
  --rade-type-line-height-body: var(--rade-text-body-line);
  --rade-type-line-height-heading: 1.4;
}

/* Mobile: one step down for headings and half-strength box shadows. */
@media (max-width: 767.98px) {
  :root,
  :host {
    --rade-shadow-opacity: 50%;
    --rade-text-h1-size: var(--rade-font-size-24);  --rade-text-h1-line: var(--rade-line-height-24);
    --rade-text-h2-size: var(--rade-font-size-20);  --rade-text-h2-line: var(--rade-line-height-20);
    --rade-text-h3-size: var(--rade-font-size-18);  --rade-text-h3-line: var(--rade-line-height-18);
    --rade-text-h4-size: var(--rade-font-size-16);  --rade-text-h4-line: var(--rade-line-height-16);
  }
}

:root,
:host {
  --rade-palette-white: #ffffff;
  --rade-palette-black: #000000;
  --rade-palette-maya-blue-400: #55c1ff;
  --rade-palette-dodger-blue-600: #1e96fc;
  --rade-palette-persian-blue-800: #072ac8;
  --rade-palette-navy-electric-900: #000099;

  --rade-palette-neutral-950: color-mix(in srgb, var(--rade-palette-black) 90%, var(--rade-palette-white));
  --rade-palette-neutral-900: color-mix(in srgb, var(--rade-palette-black) 85%, var(--rade-palette-white));
  --rade-palette-neutral-800: color-mix(in srgb, var(--rade-palette-black) 72%, var(--rade-palette-white));
  --rade-palette-neutral-500: color-mix(in srgb, var(--rade-palette-black) 50%, var(--rade-palette-white));
  --rade-palette-neutral-300: color-mix(in srgb, var(--rade-palette-black) 28%, var(--rade-palette-white));
  --rade-palette-neutral-200: color-mix(in srgb, var(--rade-palette-black) 16%, var(--rade-palette-white));
  --rade-palette-neutral-100: color-mix(in srgb, var(--rade-palette-black) 8%, var(--rade-palette-white));
  --rade-palette-neutral-50: color-mix(in srgb, var(--rade-palette-black) 3%, var(--rade-palette-white));

  --rade-white: var(--rade-palette-white);
  --rade-black: var(--rade-palette-black);
  --rade-navy: var(--rade-palette-navy-electric-900);
  --rade-persian: var(--rade-palette-persian-blue-800);
  --rade-dodger: var(--rade-palette-dodger-blue-600);
  --rade-maya: var(--rade-palette-maya-blue-400);

  /* Semantic tokens: brand swatches stay fixed; these adapt to the active theme. */
  --rade-color-primary: var(--rade-persian);
  --rade-color-primary-hover: var(--rade-navy);
  --rade-color-on-primary: var(--rade-white);
  --rade-color-link: var(--rade-color-primary);
  --rade-color-link-hover: var(--rade-color-primary-hover);
  --rade-color-secondary: var(--rade-dodger);
  --rade-color-accent: var(--rade-maya);
  --rade-color-danger: #D14220;
  --rade-color-success: #1C980C;
  --rade-color-text: var(--rade-palette-neutral-950);
  --rade-color-text-muted: var(--rade-palette-neutral-800);
  --rade-color-surface: var(--rade-white);
  --rade-color-primary-rgb: 7 42 200;
  --rade-color-primary-hover-rgb: 0 0 153;
  --rade-color-secondary-rgb: 30 150 252;
  --rade-color-accent-rgb: 85 193 255;
  --rade-color-primary-soft: color-mix(in srgb, var(--rade-color-surface) 90%, var(--rade-color-primary));
  --rade-color-primary-subtle: color-mix(in srgb, var(--rade-color-surface) 96%, var(--rade-color-primary));
  --rade-color-accent-soft: color-mix(in srgb, var(--rade-color-surface) 88%, var(--rade-color-accent));

  --bs-primary: var(--rade-color-primary);
  --bs-primary-rgb: 7, 42, 200;
  --bs-link-color: var(--rade-color-link);
  --bs-link-hover-color: var(--rade-color-link-hover);
  --bs-body-color: var(--rade-color-text);
}

body.__dm {
  --rade-color-primary: var(--rade-color-accent);
  --rade-color-primary-hover: var(--rade-white);
  --rade-color-on-primary: var(--rade-color-surface);
  --rade-color-danger: color-mix(in srgb, #D14220 65%, var(--rade-white));
  --rade-color-link: var(--rade-maya);
  --rade-color-link-hover: var(--rade-white);
  --rade-color-secondary: var(--rade-maya);
  --rade-color-accent: var(--rade-maya);
  --rade-color-text: #f1f5f9;
  --rade-color-text-muted: #c5cad2;
  --rade-color-surface: #2c2f31;
  --rade-color-primary-rgb: 85 193 255;
  --rade-color-primary-hover-rgb: 255 255 255;
  --rade-color-secondary-rgb: 85 193 255;
  --rade-color-accent-rgb: 85 193 255;
  --rade-color-primary-soft: color-mix(in srgb, var(--rade-color-surface) 90%, var(--rade-color-primary));
  --rade-color-primary-subtle: color-mix(in srgb, var(--rade-color-surface) 96%, var(--rade-color-primary));
  --rade-color-accent-soft: color-mix(in srgb, var(--rade-color-surface) 88%, var(--rade-color-accent));
  --bs-primary: var(--rade-color-primary);
  --bs-primary-rgb: 85, 193, 255;
  --bs-link-color: var(--rade-color-link);
  --bs-link-hover-color: var(--rade-color-link-hover);
  --bs-body-color: var(--rade-color-text);
  color: var(--rade-color-text);
}