/* ================================================================
   OVERTIME — Design Tokens
   Drop-in variables + base reset for every Overtime surface.
   Load Fraunces + Outfit from Google Fonts alongside this file.
   ================================================================ */

:root {
  /* ——— Core palette ——— */
  --ot-bg:            #FEFDFB;   /* Page background — warm cream */
  --ot-bg-sunk:       #FAFAF8;   /* Subdued surface (inside app chrome) */
  --ot-surface:       #FFFFFF;   /* Cards, modals, inputs */
  --ot-text:          #1A1A2E;   /* Deep navy — primary text, buttons */
  --ot-text-muted:    #6B7084;   /* Secondary copy */
  --ot-text-light:    #9A9BB0;   /* Tertiary, metadata, disclaimers */

  /* ——— Pastel accents (surface + deep pair) ———
     Rule of thumb: pastel for background fills; deep for icons,
     emphasis, active borders, and logo underline. */
  --ot-mint:          #C8F5E3;
  --ot-mint-deep:     #7EE8BB;
  --ot-mint-ink:      #166534;   /* Accessible text colour on mint */

  --ot-lavender:      #E8DFF5;
  --ot-lavender-deep: #C4A8ED;
  --ot-lavender-ink:  #5B21B6;

  --ot-peach:         #FDE4D0;
  --ot-peach-deep:    #F9B88A;
  --ot-peach-ink:     #9A3412;

  --ot-yellow:        #FEF3C7;
  --ot-yellow-deep:   #FBBF24;
  --ot-yellow-ink:    #92400E;

  --ot-blue:          #DBEAFE;
  --ot-blue-deep:     #7CB3F4;
  --ot-blue-ink:      #1E40AF;

  --ot-pink:          #FCE7F3;
  --ot-pink-deep:     #F9A8D4;
  --ot-pink-ink:      #9D174D;

  /* ——— Semantic status ——— */
  --ot-success:       #22C55E;
  --ot-warning:       #FBBF24;
  --ot-danger:        #EF4444;

  /* ——— Borders ——— */
  --ot-border:        rgba(0,0,0,0.06);
  --ot-border-soft:   rgba(0,0,0,0.04);
  --ot-border-strong: rgba(0,0,0,0.12);

  /* ——— Type ——— */
  --ot-font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
  --ot-font-body:     'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Display scale — Fraunces, tight tracking */
  --ot-display-xl:    clamp(2.8rem, 6vw, 4.5rem);   /* Hero */
  --ot-display-lg:    clamp(2rem, 4vw, 3rem);       /* Section title */
  --ot-display-md:    clamp(1.8rem, 3vw, 2.2rem);   /* Sub-section */
  --ot-display-sm:    1.4rem;                        /* Card / panel title */
  --ot-display-xs:    1.15rem;                       /* Compact heading */

  /* Body scale — Outfit */
  --ot-text-xl:       1.2rem;    /* Lead paragraph */
  --ot-text-lg:       1.05rem;   /* Large body */
  --ot-text-md:       0.95rem;   /* Default body */
  --ot-text-sm:       0.85rem;   /* Secondary */
  --ot-text-xs:       0.75rem;   /* Badges, micro-copy */
  --ot-text-2xs:      0.7rem;    /* Eyebrow labels — use with letter-spacing */

  /* ——— Radii ——— */
  --ot-radius-xs:     8px;
  --ot-radius-sm:     12px;
  --ot-radius:        20px;      /* Default — cards, large surfaces */
  --ot-radius-pill:   100px;     /* Buttons, pills, badges */

  /* ——— Shadows (soft, never heavy) ——— */
  --ot-shadow-card:   0 2px 16px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
  --ot-shadow-hover:  0 8px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --ot-shadow-lift:   0 20px 60px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);

  /* ——— Spacing scale (8-pt base, with 4/6 half-steps) ——— */
  --ot-space-1:       4px;
  --ot-space-2:       8px;
  --ot-space-3:       12px;
  --ot-space-4:       16px;
  --ot-space-5:       24px;
  --ot-space-6:       32px;
  --ot-space-7:       48px;
  --ot-space-8:       64px;
  --ot-space-9:       100px;   /* Section rhythm */

  /* ——— Layout ——— */
  --ot-max-w:         1200px;
  --ot-sidebar-w:     260px;

  /* ——— Motion ——— */
  --ot-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ot-duration-fast: 0.15s;
  --ot-duration:      0.25s;
  --ot-duration-slow: 0.6s;

  /* ——— Signature gradients ———
     Used sparingly: hero italic text, the h1 em emphasis. */
  --ot-gradient-hero: linear-gradient(135deg, var(--ot-peach-deep), var(--ot-lavender-deep), var(--ot-mint-deep));

  /* Ambient background gradients used behind feature sections */
  --ot-bg-lavender-wash:  linear-gradient(180deg, var(--ot-bg) 0%, #F5F0FF 50%, var(--ot-bg) 100%);
  --ot-bg-mint-wash:      linear-gradient(180deg, var(--ot-bg) 0%, #F0FDF4 50%, var(--ot-bg) 100%);
  --ot-bg-peach-wash:     linear-gradient(180deg, var(--ot-bg) 0%, #FEF7ED 50%, var(--ot-bg) 100%);
  --ot-bg-tri-wash:       linear-gradient(180deg, #F0FDF4 0%, #F5F0FF 50%, #FEF7ED 100%);
}

/* ================================================================
   Base reset + typography defaults
   ================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ot-font-body);
  background: var(--ot-bg);
  color: var(--ot-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ot-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ot-text);
}

/* Italic display emphasis — a distinctive Overtime pattern */
.ot-italic-gradient,
h1 em, h2 em {
  font-style: italic;
  color: transparent;
  background: var(--ot-gradient-hero);
  -webkit-background-clip: text;
          background-clip: text;
}

/* Eyebrow label — coloured, uppercase, spaced */
.ot-eyebrow {
  display: inline-block;
  font-size: var(--ot-text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ot-lavender-deep);
  margin-bottom: var(--ot-space-3);
}

/* ================================================================
   Buttons
   ================================================================ */
.ot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--ot-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 24px;
  border-radius: var(--ot-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--ot-duration) var(--ot-ease),
              box-shadow var(--ot-duration) var(--ot-ease),
              background var(--ot-duration) var(--ot-ease);
}
.ot-btn-primary   { background: var(--ot-text); color: #fff; }
.ot-btn-primary:hover   { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(26,26,46,0.25); }
.ot-btn-secondary { background: var(--ot-surface); color: var(--ot-text); border: 2px solid var(--ot-border); }
.ot-btn-secondary:hover { border-color: var(--ot-border-strong); transform: translateY(-1px); box-shadow: var(--ot-shadow-card); }
.ot-btn-ghost     { background: none; color: var(--ot-text-muted); padding: 8px 16px; }
.ot-btn-ghost:hover     { color: var(--ot-text); background: rgba(0,0,0,0.04); }
.ot-btn-lg        { padding: 14px 32px; font-size: 1.05rem; }

/* ================================================================
   Pills & badges
   ================================================================ */
.ot-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--ot-radius-pill);
  font-size: var(--ot-text-xs);
  font-weight: 600;
  line-height: 1;
}
.ot-pill-mint     { background: var(--ot-mint);     color: var(--ot-mint-ink); }
.ot-pill-lavender { background: var(--ot-lavender); color: var(--ot-lavender-ink); }
.ot-pill-peach    { background: var(--ot-peach);    color: var(--ot-peach-ink); }
.ot-pill-yellow   { background: var(--ot-yellow);   color: var(--ot-yellow-ink); }
.ot-pill-blue     { background: var(--ot-blue);     color: var(--ot-blue-ink); }
.ot-pill-pink     { background: var(--ot-pink);     color: var(--ot-pink-ink); }

/* Status badge with pulsing dot — used in hero "live status" strip */
.ot-badge-live {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ot-mint); color: var(--ot-mint-ink);
  padding: 8px 20px; border-radius: var(--ot-radius-pill);
  font-weight: 600; font-size: var(--ot-text-sm);
}
.ot-badge-live::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ot-success);
  animation: ot-pulse-dot 2s infinite;
}
@keyframes ot-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ================================================================
   Cards
   ================================================================ */
.ot-card {
  background: var(--ot-surface);
  border-radius: var(--ot-radius);
  padding: var(--ot-space-6) 28px;
  box-shadow: var(--ot-shadow-card);
  transition: box-shadow var(--ot-duration) var(--ot-ease),
              transform var(--ot-duration) var(--ot-ease);
}
.ot-card:hover { box-shadow: var(--ot-shadow-hover); transform: translateY(-4px); }

/* Tinted card variants — pair background + accent border-left */
.ot-card-mint     { background: linear-gradient(135deg, #F0FDF4, #ECFDF5); border-left: 3px solid var(--ot-mint-deep); }
.ot-card-lavender { background: linear-gradient(135deg, #F5F0FF, #EDE4FA); border-left: 3px solid var(--ot-lavender-deep); }
.ot-card-peach    { background: linear-gradient(135deg, #FEF7ED, #FDEBD7); border-left: 3px solid var(--ot-peach-deep); }
.ot-card-yellow   { background: linear-gradient(135deg, #FEF3C7, #FEF9C3); border-left: 3px solid var(--ot-yellow-deep); }
.ot-card-blue     { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); border-left: 3px solid var(--ot-blue-deep); }
.ot-card-pink     { background: linear-gradient(135deg, #FCE7F3, #FDF2F8); border-left: 3px solid var(--ot-pink-deep); }

/* ================================================================
   Form inputs
   ================================================================ */
.ot-input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--ot-border);
  border-radius: var(--ot-radius-sm);
  font-family: var(--ot-font-body);
  font-size: var(--ot-text-md);
  background: var(--ot-bg);
  color: var(--ot-text);
  transition: border-color var(--ot-duration) var(--ot-ease);
  outline: none;
}
.ot-input::placeholder { color: var(--ot-text-light); }
.ot-input:focus { border-color: var(--ot-lavender-deep); }

/* ================================================================
   Utilities
   ================================================================ */
.ot-container { max-width: var(--ot-max-w); margin: 0 auto; padding: 0 24px; }
.ot-section   { padding: var(--ot-space-9) 0; }