/* ============================================================
   Genomelink Design System — Colors & Type
   Canonical sources (in priority order):
     1. govladgo/gl-dna-painter/app/globals.css       ← live production tokens
     2. govladgo/gl-dna-painter/tailwind.config.ts    ← Tailwind color scale
     3. govladgo/GL-Network-Graph/src/components/*    ← in-use color refs
     4. Figma "Genomelink - AI Guide" → /Foundations  ← design-time tokens
     5. dna_match_code/web-tier/frontend/v1/src/*.module.scss
   Where the codebase and Figma disagree, the codebase wins.
   ============================================================ */

.y-dna-page {
  /* ============ BRAND / SEMANTIC ============ */
  --gl-primary-dark: #263856; /* ink + brand navy */
  --gl-primary-attention: #ff7c11; /* CTA orange */
  --gl-primary-attention-hover: #f2690b;
  --gl-primary-attention-pressed: #e6640a;

  --gl-secondary: #4582c9; /* link blue */
  --gl-secondary-light: #7ab8ff;
  --gl-secondary-dark: #245fa4;
  --gl-secondary-medium: #225a9c;

  --gl-positive: #7abf43;
  --gl-positive-dark: #5ea634;
  --gl-negative: #d52c43;
  --gl-warning: #ffb300;

  /* Brand accent dots (from logo mark) */
  --gl-teal: #00bdbd;
  --gl-pink: #ff5395;
  --gl-violet: #832faf;
  --gl-gold: #ffca19;

  /* ============ BLACK / NAVY ALPHAS ============ */
  --gl-black: #263856;
  --gl-black-60: rgba(38, 56, 86, 0.6);
  --gl-black-40: rgba(38, 56, 86, 0.4);
  --gl-black-30: rgba(38, 56, 86, 0.3);
  --gl-black-20: rgba(38, 56, 86, 0.2);
  --gl-black-10: rgba(38, 56, 86, 0.1);

  /* ============ GRAY SCALE (fog-blue) ============ */
  --gl-gray-950: #111d2e;
  --gl-gray-900: #1a2a42;
  --gl-gray-800: #263856; /* == primary-dark */
  --gl-gray-700: #3d5272;
  --gl-gray-600: #6786ac; /* muted text */
  --gl-gray-500: #8fabcf; /* subtle text */
  --gl-gray-400: #b0c4de;
  --gl-gray-300: #c9d6e4; /* strokes + chips */
  --gl-gray-200: #e2eaf3;
  --gl-gray-100: #e8eff8; /* surface-elements */
  --gl-gray-50: #f5f8fc; /* page bg */

  --gl-border: #e0e4ea;
  --gl-border-light: #f0f2f5;
  --gl-bg: #f5f8fc;
  --gl-surface: #ffffff;
  --gl-dark-4: #1b202d; /* modal backdrop base */

  /* Text aliases */
  --gl-text: #263856;
  --gl-text-muted: #6786ac;
  --gl-text-subtle: #8fabcf;

  /* ============ HERO / ACCENT SURFACES ============ */
  --gl-cyan-hero: #caf0f2; /* sky-teal landing bg */
  --gl-gray-light-60: rgba(232, 239, 248, 0.6);

  /* ============ CATEGORY COLORS (reports/traits) ============ */
  /* Each family: base / 60% mid / 10% wash */
  --gl-cat-blue: #18a2e2;
  --gl-cat-blue-bg: #e1eaff;
  --gl-cat-green: #b0e16b;
  --gl-cat-green-dark: #7abf43;
  --gl-cat-green-bg: rgba(122, 191, 67, 0.1);
  --gl-cat-yellow: #f4c320;
  --gl-cat-yellow-bg: rgba(244, 195, 32, 0.1);
  --gl-cat-purple: #d662d4;
  --gl-cat-purple-bg: rgba(214, 98, 212, 0.1);
  --gl-cat-pink: #ec2e77;
  --gl-cat-pink-bg: rgba(236, 46, 119, 0.1);
  --gl-cat-orange-bg: rgba(255, 124, 17, 0.1);
  --gl-cat-mint: #5ed6b4;
  --gl-cat-sky: #78cff5;

  /* Aliases used by older preview cards */
  --gl-bg-page: var(--gl-gray-50);
  --gl-bg-elements: var(--gl-gray-100);
  --gl-gray-text: var(--gl-gray-600);
  --gl-gray-mid: var(--gl-gray-500);
  --gl-accent-orange: var(--gl-primary-attention);
  --gl-accent-orange-dark: var(--gl-primary-attention-hover);
  --gl-accent-blue: var(--gl-secondary);
  --gl-primary-semi: var(--gl-black-60);
  --gl-primary-30: var(--gl-black-30);
  --gl-positive-bg: rgba(122, 191, 67, 0.1);
  --gl-positive-30: rgba(122, 191, 67, 0.3);
  --gl-positive-darker: var(--gl-positive-dark);
  --gl-negative-bg: rgba(213, 44, 67, 0.1);
  --gl-negative-dark: #b42032;
  --gl-negative-darker: #8f1a28;
  --gl-cat-blue-darker: #0e6b96;
  --gl-cat-yellow-darker: #8e6b00;
  --gl-cat-purple-darker: #7e3e7e;
  --gl-cat-pink-darker: #a5184f;

  /* ============ SHADOWS ============ */
  --gl-shadow-sm: 0 1px 2px rgba(38, 56, 86, 0.06);
  --gl-shadow-md: 0 2px 8px rgba(38, 56, 86, 0.1);
  --gl-shadow-lg: 0 8px 24px rgba(38, 56, 86, 0.12);
  --gl-shadow-light: 0 4px 10px rgba(74, 93, 128, 0.13); /* standard card rest */
  --gl-shadow-medium: 0 10px 50px rgba(74, 93, 128, 0.13); /* hovered card */
  --gl-shadow-heavy: 0 20px 40px rgba(74, 93, 128, 0.24);
  --gl-shadow-modal: 0 5px 10px rgba(74, 93, 128, 0.16);
  --gl-shadow-tab: 0 5px 10px rgba(74, 93, 128, 0.08);

  /* Aliases */
  --gl-shadow-card: var(--gl-shadow-light);
  --gl-shadow-card-hover: var(--gl-shadow-medium);

  /* ============ RADIUS ============ */
  --gl-radius-sm: 0.25rem; /* 4px  — chips, small badges */
  --gl-radius-md: 0.5rem; /* 8px  — inputs */
  --gl-radius-lg: 0.75rem; /* 12px — cards */
  --gl-radius-xl: 1rem; /* 16px — large cards, modals */
  --gl-radius-pill: 9999px; /* buttons, avatars, chips */

  /* ============ SPACING (4px base) ============ */
  --gl-space-1: 4px;
  --gl-space-2: 8px;
  --gl-space-3: 12px;
  --gl-space-4: 16px;
  --gl-space-5: 20px;
  --gl-space-6: 24px;
  --gl-space-8: 32px;
  --gl-space-10: 40px;
  --gl-space-12: 48px;
  --gl-space-16: 64px;
  --gl-space-20: 80px;

  /* ============ TYPOGRAPHY ============ */
  /* Production uses Inter universally. Figma pseudocode says SF Pro Text —
     treat that as Apple-system rendering only. Everything web ships Inter. */
  --gl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gl-font-sans: var(--gl-font);
  --gl-font-ui: var(--gl-font);
  --gl-font-display: "Lexend Deca", var(--gl-font); /* occasional accents */

  /* Type scale (line-height matches globals.css gl-h1..gl-h5) */
  --gl-h1-size: 48px;
  --gl-h1-lh: 1.1;
  --gl-h1-weight: 700;
  --gl-h2-size: 32px;
  --gl-h2-lh: 36px;
  --gl-h2-weight: 700;
  --gl-h3-size: 24px;
  --gl-h3-lh: 32px;
  --gl-h3-weight: 600;
  --gl-h4-size: 20px;
  --gl-h4-lh: 28px;
  --gl-h4-weight: 600;
  --gl-h5-size: 16px;
  --gl-h5-lh: 24px;
  --gl-h5-weight: 600;

  --gl-body-size: 16px;
  --gl-body-lh: 24px;
  --gl-body-weight: 400;
  --gl-small-size: 14px;
  --gl-small-lh: 20px;
  --gl-small-weight: 400;
  --gl-caption-size: 12px;
  --gl-caption-lh: 16px;
  --gl-caption-weight: 500;
  --gl-tag-size: 10px;
  --gl-tag-lh: 14px;
  --gl-tag-weight: 600;

  /* ============ TRANSITIONS ============ */
  --gl-transition-base:
    background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    opacity 0.15s ease;
}

.y-dna-page {
  font-size: 14px;
  background-color: rgb(249, 252, 255);
  color: #263856;
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}