/**
 * Tiragena — semantic design tokens (global color + surface system)
 * Single source of truth for the marketing shell.
 * Inspired by premium biotech presentation (Proteros-level restraint); Tiragena identity.
 */

:root {
  /* ===== RAW PALETTE (do not use directly in components) ===== */
  --tir-navy-950: #0a1f35;
  --tir-navy-900: #0e2a47;
  --tir-navy-800: #163d63;
  --tir-navy-700: #1f4f78;
  --tir-teal-600: #1e6b7c;
  --tir-teal-500: #2a8a9b;
  --tir-teal-400: #4aa3b3;
  --tir-slate-900: #1a2e42;
  --tir-slate-700: #33475b;
  --tir-slate-500: #5a6d80;
  --tir-slate-400: #7a8c9e;
  --tir-slate-200: #c5d0dc;
  --tir-slate-100: #e8edf2;
  --tir-slate-50: #f4f7fa;
  --tir-white: #ffffff;
  --tir-gold-600: #ad8900;
  --tir-gold-500: #c9a20e;
  --tir-gold-400: #d4b23a;

  /* ===== SEMANTIC — BACKGROUND ===== */
  --color-bg-page: var(--tir-white);
  --color-bg-section: var(--tir-white);
  --color-bg-section-alt: var(--tir-slate-50);
  --color-bg-section-band: #eef3f8;
  --color-bg-section-dark: var(--tir-navy-900);
  --color-bg-section-accent: #e8f3f5;
  --color-bg-card: var(--tir-white);
  --color-bg-card-elevated: #fafcfe;
  --color-bg-input: var(--tir-white);
  --color-bg-footer: var(--tir-navy-950);
  --color-bg-nav-hat: var(--tir-navy-900);
  --color-bg-nav-brand: var(--tir-white);
  --color-bg-overlay: rgba(10, 31, 53, 0.55);

  /* ===== SEMANTIC — FOREGROUND ===== */
  --color-text-primary: var(--tir-slate-900);
  --color-text-secondary: var(--tir-slate-700);
  --color-text-muted: var(--tir-slate-500);
  --color-text-subtle: var(--tir-slate-400);
  --color-text-inverse: var(--tir-white);
  --color-text-inverse-muted: rgba(255, 255, 255, 0.88);
  --color-text-inverse-subtle: rgba(255, 255, 255, 0.72);
  --color-text-on-accent: var(--tir-white);

  /* ===== SEMANTIC — BRAND ===== */
  --color-brand-primary: var(--tir-navy-900);
  --color-brand-secondary: var(--tir-teal-600);
  --color-brand-accent: var(--tir-gold-600);
  --color-brand-accent-hover: var(--tir-gold-500);

  /* ===== SEMANTIC — UI ===== */
  --color-border: var(--tir-slate-100);
  --color-border-strong: var(--tir-slate-200);
  --color-divider: var(--tir-slate-100);
  --color-focus-ring: var(--tir-teal-500);
  --color-card-hover: var(--tir-slate-50);

  /* ===== SEMANTIC — LINKS ===== */
  --color-link: var(--tir-teal-600);
  --color-link-hover: var(--tir-navy-800);
  --color-link-muted: var(--tir-slate-500);
  --color-link-inverse: var(--tir-white);
  --color-link-inverse-hover: var(--tir-gold-400);

  /* ===== SEMANTIC — CTA ===== */
  --color-cta-primary-bg: var(--tir-navy-900);
  --color-cta-primary-text: var(--tir-white);
  --color-cta-primary-border: var(--tir-navy-900);
  --color-cta-primary-hover-bg: var(--tir-gold-600);
  --color-cta-primary-hover-border: var(--tir-gold-600);
  --color-cta-primary-hover-text: var(--tir-white);
  --color-cta-secondary-bg: transparent;
  --color-cta-secondary-text: var(--tir-navy-900);
  --color-cta-secondary-border: var(--tir-slate-200);
  --color-cta-secondary-hover-bg: var(--tir-slate-50);
  --color-cta-secondary-hover-text: var(--tir-navy-800);
  --color-cta-secondary-hover-border: var(--tir-navy-700);
  --color-cta-on-dark-bg: var(--tir-white);
  --color-cta-on-dark-text: var(--tir-navy-900);
  --color-cta-on-dark-hover-bg: var(--tir-gold-600);
  --color-cta-on-dark-hover-text: var(--tir-white);

  /* ===== SEMANTIC — NAVIGATION ===== */
  --color-nav-text: var(--tir-white);
  --color-nav-text-hover: rgba(255, 255, 255, 0.82);
  --color-nav-text-active: var(--tir-gold-400);
  --color-nav-secondary-text: var(--tir-slate-500);
  --color-nav-secondary-hover: var(--tir-navy-900);
  --color-nav-dropdown-bg: var(--tir-white);
  --color-nav-dropdown-text: var(--tir-slate-500);
  --color-nav-dropdown-hover-bg: var(--tir-slate-50);
  --color-nav-dropdown-hover-text: var(--tir-navy-900);

  /* ===== SEMANTIC — FOOTER ===== */
  --color-footer-bg: var(--tir-navy-950);
  --color-footer-heading: var(--tir-white);
  --color-footer-text: rgba(255, 255, 255, 0.85);
  --color-footer-muted: rgba(255, 255, 255, 0.72);
  --color-footer-link: rgba(255, 255, 255, 0.88);
  --color-footer-link-hover: var(--tir-gold-400);

  /* ===== LEGACY ALIASES (component CSS compatibility) ===== */
  --ref-black: var(--color-brand-primary);
  --ref-white: var(--tir-white);
  --ref-ink: var(--color-text-primary);
  --ref-muted: var(--color-text-muted);
  --ref-line: var(--color-border);
  --ref-band: var(--color-bg-section-band);
  --ref-nav-bg: var(--color-bg-nav-hat);
  --ref-nav-text: var(--color-nav-text);
  --ref-footer-bg: var(--color-footer-bg);
  --ref-footer-text: var(--color-footer-text);
  --ref-gold: var(--color-brand-accent);

  --pr-font: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --pr-container: 1170px;
  --pr-gutter: 15px;
  --pr-ink: var(--color-text-primary);
  --pr-muted: var(--color-text-secondary);
  --pr-line: var(--color-border);
  --pr-white: var(--tir-white);
  --pr-band: var(--color-bg-section-band);
  --pr-footer: var(--color-footer-bg);
  --pr-accent: var(--color-brand-secondary);
  --pr-accent-dark: var(--tir-navy-800);
  --pr-accent-hover: var(--color-brand-accent);
  --pr-hero-min: 550px;
  --pr-nav-hat-h: 35px;
  --pr-nav-brand-h: 100px;
  --pr-site-header-h: calc(var(--pr-nav-hat-h) + var(--pr-nav-brand-h));
  --pr-header-h: var(--pr-site-header-h);
  --pr-header-compact: calc(var(--pr-nav-hat-h) + 64px);
  --pr-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography scale (Proteros-measured) */
  --pr-type-display-size: 42px;
  --pr-type-display-lh: 48px;
  --pr-type-display-ls: 6px;
  --pr-type-proposition-size: 32px;
  --pr-type-proposition-ls: 4.5px;
  --pr-type-section-size: 40px;
  --pr-type-section-ls: 4px;
  --pr-type-kicker-size: 21px;
  --pr-type-kicker-ls: 3px;
  --pr-type-body-size: 15px;
  --pr-type-body-lh: 1.62;
  --pr-type-small-size: 14px;
  --pr-type-caption-size: 13px;
  --pr-section-y: clamp(3.5rem, 6vw, 5rem);
  --pr-footer-y: 50px;

  /* Legacy theme bridge */
  --accent: var(--color-brand-secondary);
  --accent-2: var(--color-brand-secondary);
  --ix-accent: var(--color-brand-secondary);
  --bg-deep: var(--color-bg-page);
  --text: var(--color-text-primary);
  --muted: var(--color-text-muted);
  --border: var(--color-border);
}