/*
 * ============================================================
 *  COWORKDOC — Design Tokens
 *  css/design-tokens.css
 *
 *  Single source of truth for all colours, typography,
 *  spacing, and UI values used across the site.
 *
 *  Link this file FIRST in every HTML page, before any
 *  other stylesheet:
 *  <link rel="stylesheet" href="css/design-tokens.css">
 * ============================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {

  /* ── COLOUR: BRAND ───────────────────────────────────────
     Pulled directly from the CoworkDoc logo.
     --brand-cobalt  = "COWORK" lettering
     --brand-sky     = "DOC" lettering                      */
  --brand-cobalt:    #1a4fa0;
  --brand-sky:       #7ec8e3;

  /* ── COLOUR: BACKGROUNDS ─────────────────────────────────
     Use in layers — navy is the deepest, card is elevated. */
  --bg-page:         #071428;   /* body background           */
  --bg-section:      #0c2348;   /* alternate section bg      */
  --bg-card:         #0f2e5e;   /* card / panel bg           */
  --bg-overlay:      rgba(7, 20, 40, 0.97);  /* nav / modals */

  /* ── COLOUR: INTERACTIVE ─────────────────────────────────*/
  --blue:            #1a4fa0;   /* primary — buttons, links  */
  --blue-hover:      #2263c0;   /* hover state               */
  --blue-light:      #7ec8e3;   /* accent — labels, chips    */
  --blue-pale:       #c8e8f5;   /* very light tint           */
  --teal:            #00c4a7;   /* CTA / conversion elements */
  --teal-dim:        rgba(0, 196, 167, 0.10);  /* teal bg tint */

  /* ── COLOUR: TEXT ────────────────────────────────────────*/
  --text-primary:    #ffffff;
  --text-secondary:  rgba(255, 255, 255, 0.70);
  --text-muted:      rgba(255, 255, 255, 0.42);
  --text-faint:      rgba(255, 255, 255, 0.28);

  /* ── COLOUR: BORDERS ─────────────────────────────────────*/
  --border-subtle:   rgba(90, 176, 224, 0.10);
  --border-light:    rgba(90, 176, 224, 0.18);
  --border-medium:   rgba(90, 176, 224, 0.28);

  /* ── COLOUR: STATUS ──────────────────────────────────────*/
  --success:         #00c4a7;
  --warning:         #f5a623;
  --error:           #e05a5a;

  /* ── TYPOGRAPHY: FAMILIES ────────────────────────────────*/
  --font-serif:      'Playfair Display', Georgia, serif;
  --font-sans:       'Outfit', system-ui, sans-serif;

  /* ── TYPOGRAPHY: SCALE ───────────────────────────────────
     Use these for consistent sizing across all pages.       */
  --text-xs:         11px;
  --text-sm:         13px;
  --text-base:       15px;
  --text-md:         17px;
  --text-lg:         20px;
  --text-xl:         24px;
  --text-2xl:        32px;
  --text-3xl:        40px;
  --text-4xl:        56px;
  --text-5xl:        72px;
  --text-hero:       96px;    /* homepage logo wordmark only */

  /* ── TYPOGRAPHY: WEIGHTS ─────────────────────────────────*/
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── TYPOGRAPHY: LINE HEIGHTS ────────────────────────────*/
  --leading-tight:   1.10;
  --leading-snug:    1.25;
  --leading-normal:  1.50;
  --leading-relaxed: 1.72;

  /* ── TYPOGRAPHY: LETTER SPACING ─────────────────────────*/
  --tracking-tight:  -0.01em;
  --tracking-normal:  0.02em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.14em;

  /* ── SPACING SCALE ───────────────────────────────────────
     Base unit: 4px. All spacing is a multiple of 4.        */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* ── BORDER RADIUS ───────────────────────────────────────*/
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   26px;
  --radius-full: 9999px;   /* pills / tags */

  /* ── SHADOWS ─────────────────────────────────────────────*/
  --shadow-sm:   0 2px 12px rgba(0, 0, 0, 0.20);
  --shadow-md:   0 8px 28px rgba(0, 0, 0, 0.30);
  --shadow-lg:   0 20px 56px rgba(0, 0, 0, 0.40);
  --shadow-card: 0 32px 72px rgba(0, 0, 0, 0.45);
  --shadow-blue: 0 10px 32px rgba(26, 79, 160, 0.40);

  /* ── TRANSITIONS ─────────────────────────────────────────*/
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.40s ease;
  --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX SCALE ───────────────────────────────────────*/
  --z-base:      1;
  --z-raised:    10;
  --z-dropdown:  50;
  --z-sticky:    100;
  --z-overlay:   200;
  --z-modal:     300;
  --z-toast:     400;

  /* ── LAYOUT ──────────────────────────────────────────────*/
  --max-width:       1440px;
  --content-width:   1200px;
  --section-padding: 96px 60px;
  --nav-height:      70px;

}


/* ============================================================
 *  BASE RESET & GLOBALS
 * ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  background: var(--bg-page);
  color: var(--text-primary);
  max-width: var(--max-width);
  margin: 0 auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font-sans);
  cursor: pointer;
}

/* Shared keyframe animations used across all pages */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(18px, -18px) scale(1.07); }
}

@keyframes scan {
  from { top: -60%; }
  to   { top: 120%; }
}

@keyframes pulse-ring {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.08); opacity: 1; }
}

@keyframes wa-entrance {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}