/* ============================================================
   3R GEEKS — Design Tokens
   Single source of truth for all design values.
   Never use hardcoded colors, spacing, or type sizes elsewhere.
   ============================================================

   LOGO PALETTE (3 colors — the only colors in the mark):
     Dark Teal     #175861   — outer heads, "3R" wordmark
     Tropical Teal #4AB8C3   — center head, dominant brand color
     Graphite      #353635   — "GEEKS" wordmark, body text

   EXTENDED PALETTE (added after logo, not in the mark):
     Deep Space Blue #233B5A — rich dark section backgrounds
     Majorelle Blue  #7253F2 — CTA buttons, interactive accents
   ============================================================ */

:root {

  /* ── Core Brand (logo) ──────────────────────────────────── */
  --color-primary:         #4AB8C3;   /* Tropical Teal */
  --color-primary-dark:    #35a0ab;
  --color-primary-darker:  #2a8a94;
  --color-primary-light:   #d6f2f5;
  --color-primary-xlight:  #edf9fa;

  --color-secondary:       #175861;   /* Dark Teal */
  --color-secondary-dark:  #0f3d44;
  --color-secondary-light: #c5dde0;

  --color-graphite:        #353635;   /* Graphite */
  --color-graphite-mid:    #5a5959;
  --color-graphite-light:  #8a8989;

  /* ── Extended Palette ───────────────────────────────────── */
  --color-navy:            #233B5A;   /* Deep Space Blue */
  --color-navy-dark:       #162640;
  --color-navy-light:      #c8d4e3;

  --color-accent:          #7253F2;   /* Majorelle Blue */
  --color-accent-dark:     #5c3fd4;
  --color-accent-light:    #e8e3fd;
  --color-accent-xlight:   #f3f0ff;

  /* ── Text ───────────────────────────────────────────────── */
  --color-text:            #353635;
  --color-text-secondary:  #4a5568;
  --color-text-muted:      #718096;
  --color-text-subtle:     #a0aec0;
  --color-text-inverse:    #ffffff;
  --color-text-heading:    #175861;
  --color-text-link:       #4AB8C3;
  --color-text-link-hover: #175861;

  /* ── Backgrounds ────────────────────────────────────────── */
  --color-bg:              #ffffff;
  --color-bg-subtle:       #f7fafb;
  --color-bg-muted:        #edf2f7;
  --color-bg-tint:         #edf9fa;
  --color-bg-dark:         #175861;
  --color-bg-navy:         #233B5A;
  --color-bg-footer:       #353635;

  /* ── Borders ────────────────────────────────────────────── */
  --color-border:          #e2e8f0;
  --color-border-subtle:   #f0f4f8;
  --color-border-strong:   #cbd5e0;
  --color-border-primary:  #4AB8C3;

  /* ── Status ─────────────────────────────────────────────── */
  --color-success:         #38a169;
  --color-success-light:   #c6f6d5;
  --color-error:           #e53e3e;
  --color-error-light:     #fed7d7;


  /* ── Typography ─────────────────────────────────────────────
     Catamaran: body, UI, nav — honours current site choice.
     Barlow Condensed: hero display headlines only — same
     humanist-sans DNA as Catamaran, natural pairing.
  ────────────────────────────────────────────────────────── */
  --font-sans:     'Catamaran', 'Segoe UI', system-ui, sans-serif;
  --font-display:  'Barlow Condensed', 'Catamaran', sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.12em;


  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-14:  3.5rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-28:  7rem;
  --space-32:  8rem;


  /* ── Layout ──────────────────────────────────────────────── */
  --container-max:     1200px;
  --container-wide:    1360px;
  --container-narrow:   760px;
  --container-form:     640px;

  --section-pad-sm:    4rem;
  --section-pad:       6rem;
  --section-pad-lg:    7rem;

  --header-height:     72px;
  --header-height-sm:  60px;


  /* ── Radii ───────────────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;


  /* ── Shadows (teal-tinted) ───────────────────────────────── */
  --shadow-xs:  0 1px 2px  rgba(23,88,97,.06);
  --shadow-sm:  0 2px 6px  rgba(23,88,97,.08);
  --shadow-md:  0 4px 16px rgba(23,88,97,.10);
  --shadow-lg:  0 8px 28px rgba(23,88,97,.13);
  --shadow-xl:  0 16px 48px rgba(23,88,97,.15);

  --shadow-accent:    0 4px 20px rgba(114,83,242,.28);
  --shadow-accent-lg: 0 8px 32px rgba(114,83,242,.32);
  --shadow-primary:   0 4px 16px rgba(74,184,195,.30);


  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast: 150ms var(--ease-out);
  --transition-base: 250ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);


  /* ── Z-Index ─────────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-toast:    500;


  /* ── Component Tokens ────────────────────────────────────── */
  --btn-radius:      var(--radius-md);
  --btn-pad-y:       0.75rem;
  --btn-pad-x:       1.75rem;
  --btn-pad-y-sm:    0.5rem;
  --btn-pad-x-sm:    1.25rem;
  --btn-pad-y-lg:    1rem;
  --btn-pad-x-lg:    2.25rem;
  --btn-weight:      var(--weight-semibold);
  --btn-tracking:    0.01em;

  --card-radius:     var(--radius-lg);
  --card-pad:        var(--space-8);
  --card-pad-sm:     var(--space-6);
  --card-bg:         var(--color-bg);
  --card-border:     1px solid var(--color-border);
  --card-shadow:     var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);

  --input-radius:    var(--radius-md);
  --input-pad-y:     0.75rem;
  --input-pad-x:     1rem;
  --input-border:    1px solid var(--color-border-strong);
  --input-bg:        var(--color-bg);

  --label-color:     var(--color-primary);
  --label-size:      var(--text-xs);
  --label-weight:    var(--weight-bold);
  --label-tracking:  var(--tracking-widest);

  --tag-color:       var(--color-accent);
  --tag-bg:          var(--color-accent-xlight);
}


/* ── Dark section cascade ────────────────────────────────────
   Apply to <section> elements; child tokens auto-update.
──────────────────────────────────────────────────────────── */
.section--dark {
  --color-text:           #ffffff;
  --color-text-secondary: rgba(255,255,255,.82);
  --color-text-muted:     rgba(255,255,255,.60);
  --color-text-heading:   #ffffff;
  --color-border:         rgba(255,255,255,.14);
  --color-bg-subtle:      rgba(255,255,255,.06);
  --card-bg:              rgba(255,255,255,.08);
  --card-border:          1px solid rgba(255,255,255,.12);
  --card-shadow:          none;
  --label-color:          #4AB8C3;
}

.section--navy {
  --color-text:           #ffffff;
  --color-text-secondary: rgba(255,255,255,.82);
  --color-text-muted:     rgba(255,255,255,.60);
  --color-text-heading:   #4AB8C3;
  --color-border:         rgba(255,255,255,.14);
  --card-bg:              rgba(255,255,255,.06);
  --card-border:          1px solid rgba(255,255,255,.10);
  --label-color:          #4AB8C3;
}

.section--footer {
  --color-text:           rgba(255,255,255,.75);
  --color-text-secondary: rgba(255,255,255,.60);
  --color-text-heading:   #ffffff;
  --color-text-link:      #4AB8C3;
  --color-text-link-hover:#ffffff;
  --color-border:         rgba(255,255,255,.12);
}