/* ============================================================
   RABBITS DESIGN SYSTEM — colors_and_type.css
   Warm minimalism inspired by Notion.
   Font: Inter (substituting proprietary NotionInter).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Base font declaration ─────────────────────────────────── */
:root {
  --font-primary: 'Inter', -apple-system, system-ui, 'Segoe UI', Helvetica,
    'Apple Color Emoji', Arial, 'Segoe UI Emoji', 'Segoe UI Symbol';

  /* ── COLOR PALETTE ──────────────────────────────────────── */

  /* Core */
  --color-black:          rgba(0, 0, 0, 0.95);   /* primary text — near-black */
  --color-white:          #ffffff;                 /* page bg, card surface */
  --color-blue:           #E8356D;                 /* brand pink — primary CTA/link */
  --color-blue-active:    #c9235a;                 /* pressed/active state */
  --color-blue-dark:      #3a1024;                 /* deep berry — secondary brand */
  --color-focus:          #E8356D;                 /* focus rings */

  /* Warm Neutral Scale */
  --color-warm-white:     #f6f5f4;                 /* alt bg, section tint */
  --color-warm-dark:      #31302e;                 /* dark surface bg */
  --color-warm-500:       #615d59;                 /* secondary/body text */
  --color-warm-300:       #a39e98;                 /* placeholder, disabled, caption */

  /* Interactive */
  --color-link:           #E8356D;
  --color-link-dark-bg:   #62aef0;                 /* links on dark backgrounds */
  --color-badge-bg:       #f2f9ff;
  --color-badge-text:     #E8356D;

  /* Semantic Accents */
  --color-teal:           #2a9d99;
  --color-green:          #1aae39;
  --color-orange:         #dd5b00;
  --color-pink:           #ff64c8;
  --color-purple:         #391c57;
  --color-brown:          #523410;

  /* Borders */
  --border-whisper:       1px solid rgba(0, 0, 0, 0.10);
  --border-input:         1px solid #dddddd;
  --border-focus:         2px solid var(--color-focus);

  /* Shadows */
  --shadow-card:
    rgba(0, 0, 0, 0.040) 0px 4.000px 18.000px,
    rgba(0, 0, 0, 0.027) 0px 2.025px  7.847px,
    rgba(0, 0, 0, 0.020) 0px 0.800px  2.925px,
    rgba(0, 0, 0, 0.010) 0px 0.175px  1.041px;

  --shadow-deep:
    rgba(0, 0, 0, 0.010) 0px  1px  3px,
    rgba(0, 0, 0, 0.020) 0px  3px  7px,
    rgba(0, 0, 0, 0.020) 0px  7px 15px,
    rgba(0, 0, 0, 0.040) 0px 14px 28px,
    rgba(0, 0, 0, 0.050) 0px 23px 52px;

  --shadow-focus:
    0 0 0 3px rgba(9, 127, 232, 0.25);

  /* ── SPACING (8px base) ─────────────────────────────────── */
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;

  /* ── CORNER RADII ───────────────────────────────────────── */
  --radius-micro:    4px;      /* buttons, inputs */
  --radius-small:    8px;      /* small cards, inline */
  --radius-standard: 12px;     /* cards, feature containers */
  --radius-large:    16px;     /* hero cards, promo blocks */
  --radius-pill:     9999px;   /* badges, status pills */
  --radius-circle:   100%;     /* avatars, dot indicators */

  /* ── TYPOGRAPHY SCALE ───────────────────────────────────── */

  /* Sizes */
  --text-display-hero:       4.000rem;   /* 64px */
  --text-display-secondary:  3.375rem;   /* 54px */
  --text-section-heading:    3.000rem;   /* 48px */
  --text-subheading-large:   2.500rem;   /* 40px */
  --text-subheading:         1.625rem;   /* 26px */
  --text-card-title:         1.375rem;   /* 22px */
  --text-body-large:         1.250rem;   /* 20px */
  --text-body:               1.000rem;   /* 16px */
  --text-nav:                0.9375rem;  /* 15px */
  --text-caption:            0.875rem;   /* 14px */
  --text-badge:              0.750rem;   /* 12px */

  /* Weights */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* Line Heights */
  --lh-tight:      1.00;
  --lh-compressed: 1.04;
  --lh-snug:       1.23;
  --lh-card:       1.27;
  --lh-relaxed:    1.33;
  --lh-caption:    1.43;
  --lh-body:       1.50;
  --lh-subheading: 1.40;

  /* Letter Spacings */
  --ls-display-hero:      -2.125px;
  --ls-display-secondary: -1.875px;
  --ls-section:           -1.500px;
  --ls-subheading:        -0.625px;
  --ls-card-title:        -0.250px;
  --ls-body-large:        -0.125px;
  --ls-normal:             0px;
  --ls-badge:              0.125px;   /* only positive tracking — small text */

  /* ── SEMANTIC TYPOGRAPHY ROLES ──────────────────────────── */

  /* h1 — Display Hero */
  --h1-size:     var(--text-display-hero);
  --h1-weight:   var(--weight-bold);
  --h1-lh:       var(--lh-tight);
  --h1-ls:       var(--ls-display-hero);
  --h1-color:    var(--color-black);

  /* h2 — Display Secondary */
  --h2-size:     var(--text-display-secondary);
  --h2-weight:   var(--weight-bold);
  --h2-lh:       var(--lh-compressed);
  --h2-ls:       var(--ls-display-secondary);
  --h2-color:    var(--color-black);

  /* h3 — Section Heading */
  --h3-size:     var(--text-section-heading);
  --h3-weight:   var(--weight-bold);
  --h3-lh:       var(--lh-tight);
  --h3-ls:       var(--ls-section);
  --h3-color:    var(--color-black);

  /* h4 — Subheading */
  --h4-size:     var(--text-subheading);
  --h4-weight:   var(--weight-bold);
  --h4-lh:       var(--lh-snug);
  --h4-ls:       var(--ls-subheading);
  --h4-color:    var(--color-black);

  /* card-title */
  --card-title-size:   var(--text-card-title);
  --card-title-weight: var(--weight-bold);
  --card-title-lh:     var(--lh-card);
  --card-title-ls:     var(--ls-card-title);
  --card-title-color:  var(--color-black);

  /* body-large */
  --body-large-size:   var(--text-body-large);
  --body-large-weight: var(--weight-semibold);
  --body-large-lh:     var(--lh-subheading);
  --body-large-ls:     var(--ls-body-large);
  --body-large-color:  var(--color-warm-500);

  /* body */
  --body-size:   var(--text-body);
  --body-weight: var(--weight-regular);
  --body-lh:     var(--lh-body);
  --body-ls:     var(--ls-normal);
  --body-color:  var(--color-warm-500);

  /* nav / button */
  --nav-size:   var(--text-nav);
  --nav-weight: var(--weight-semibold);
  --nav-lh:     var(--lh-relaxed);
  --nav-ls:     var(--ls-normal);

  /* caption */
  --caption-size:   var(--text-caption);
  --caption-weight: var(--weight-medium);
  --caption-lh:     var(--lh-caption);
  --caption-color:  var(--color-warm-500);

  /* badge */
  --badge-size:   var(--text-badge);
  --badge-weight: var(--weight-semibold);
  --badge-lh:     var(--lh-relaxed);
  --badge-ls:     var(--ls-badge);

  /* ── COMPONENT TOKENS ───────────────────────────────────── */

  /* Button Primary */
  --btn-primary-bg:          var(--color-blue);
  --btn-primary-bg-hover:    var(--color-blue-active);
  --btn-primary-text:        var(--color-white);
  --btn-primary-radius:      var(--radius-micro);
  --btn-primary-padding:     8px 16px;

  /* Button Secondary */
  --btn-secondary-bg:        rgba(0, 0, 0, 0.05);
  --btn-secondary-text:      var(--color-black);
  --btn-secondary-radius:    var(--radius-micro);
  --btn-secondary-padding:   8px 16px;

  /* Card */
  --card-bg:                 var(--color-white);
  --card-border:             var(--border-whisper);
  --card-radius:             var(--radius-standard);
  --card-shadow:             var(--shadow-card);

  /* Input */
  --input-bg:                var(--color-white);
  --input-border:            var(--border-input);
  --input-radius:            var(--radius-micro);
  --input-padding:           6px;
  --input-text:              rgba(0, 0, 0, 0.9);
  --input-placeholder:       var(--color-warm-300);

  /* Nav */
  --nav-height:              56px;
  --nav-bg:                  var(--color-white);

  /* Section */
  --section-padding-y:       var(--space-11);   /* 80px */
  --section-max-width:       1200px;
}

/* ── UTILITY CLASSES ────────────────────────────────────────── */

/* Typography */
.t-display-hero {
  font-family: var(--font-primary);
  font-size: var(--text-display-hero);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display-hero);
  color: var(--color-black);
  font-feature-settings: "lnum", "locl";
}
.t-display-secondary {
  font-family: var(--font-primary);
  font-size: var(--text-display-secondary);
  font-weight: var(--weight-bold);
  line-height: var(--lh-compressed);
  letter-spacing: var(--ls-display-secondary);
  color: var(--color-black);
  font-feature-settings: "lnum", "locl";
}
.t-section-heading {
  font-family: var(--font-primary);
  font-size: var(--text-section-heading);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-section);
  color: var(--color-black);
  font-feature-settings: "lnum", "locl";
}
.t-subheading {
  font-family: var(--font-primary);
  font-size: var(--text-subheading);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-subheading);
  color: var(--color-black);
}
.t-card-title {
  font-family: var(--font-primary);
  font-size: var(--text-card-title);
  font-weight: var(--weight-bold);
  line-height: var(--lh-card);
  letter-spacing: var(--ls-card-title);
  color: var(--color-black);
}
.t-body-large {
  font-family: var(--font-primary);
  font-size: var(--text-body-large);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-subheading);
  letter-spacing: var(--ls-body-large);
  color: var(--color-warm-500);
}
.t-body {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-warm-500);
}
.t-body-medium {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: var(--lh-body);
  color: var(--color-black);
}
.t-nav {
  font-family: var(--font-primary);
  font-size: var(--text-nav);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-relaxed);
  color: var(--color-black);
}
.t-caption {
  font-family: var(--font-primary);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--lh-caption);
  color: var(--color-warm-500);
}
.t-badge {
  font-family: var(--font-primary);
  font-size: var(--text-badge);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-badge);
}

/* Cards */
.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

/* Pill badge */
.badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  font-size: var(--badge-size);
  font-weight: var(--badge-weight);
  letter-spacing: var(--ls-badge);
  line-height: var(--lh-relaxed);
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid transparent;
  border-radius: var(--btn-primary-radius);
  padding: var(--btn-primary-padding);
  font-family: var(--font-primary);
  font-size: var(--text-nav);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-relaxed);
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease, transform 100ms ease;
}
.btn-primary:hover  { background: var(--btn-primary-bg-hover); }
.btn-primary:active { transform: scale(0.9); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid transparent;
  border-radius: var(--btn-secondary-radius);
  padding: var(--btn-secondary-padding);
  font-family: var(--font-primary);
  font-size: var(--text-nav);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-relaxed);
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease, transform 100ms ease;
}
.btn-secondary:hover  { background: rgba(0,0,0,0.09); transform: scale(1.02); }
.btn-secondary:active { transform: scale(0.9); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--color-black);
  border: 1px solid transparent;
  border-radius: var(--btn-primary-radius);
  padding: var(--btn-primary-padding);
  font-family: var(--font-primary);
  font-size: var(--text-nav);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-relaxed);
  cursor: pointer;
  text-decoration: none;
  transition: text-decoration 150ms ease;
}
.btn-ghost:hover { text-decoration: underline; }

/* Focus */
*:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

/* Input */
.input {
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding) 10px;
  font-family: var(--font-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--input-text);
}
.input::placeholder { color: var(--input-placeholder); }
.input:focus {
  outline: var(--border-focus);
  outline-offset: 0;
  box-shadow: var(--shadow-focus);
}