/* ============================================================
   Beekind Moving Co. — Design Tokens
   colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   COLOR TOKENS
   ============================================================ */

:root {
  /* --- Brand Primitives --- */
  --color-yellow-50:  #FFFDE7;
  --color-yellow-100: #FFF6CC;
  --color-yellow-200: #FFEEA0;
  --color-yellow-300: #FFE066;
  --color-yellow-400: #F5C400;
  --color-yellow-500: #D4A900;
  --color-yellow-600: #A87F00;

  --color-brown-50:  #FFFBEE;
  --color-brown-100: #F5EDD0;
  --color-brown-200: #E8D070;
  --color-brown-300: #C4A44A;
  --color-brown-400: #8C6820;
  --color-brown-500: #6B5E3E;
  --color-brown-600: #3D2D0A;
  --color-brown-700: #2B1A00;
  --color-brown-800: #1A0F00;

  --color-white:     #FFFFFF;
  --color-amber:     #E07C00;
  --color-green:     #2E7D32;
  --color-red:       #C62828;

  /* --- Semantic Colors --- */
  --color-brand:          var(--color-yellow-400);   /* #F5C400 */
  --color-brand-dark:     var(--color-brown-700);    /* #2B1A00 */
  --color-brand-light:    var(--color-yellow-100);   /* #FFF6CC */

  --color-bg:             var(--color-white);
  --color-bg-alt:         var(--color-brown-50);     /* #FFFBEE cream */
  --color-bg-surface:     var(--color-yellow-100);   /* #FFF6CC */
  --color-bg-invert:      var(--color-yellow-400);   /* yellow panels */

  --color-fg-1:           var(--color-brown-700);    /* primary text */
  --color-fg-2:           var(--color-brown-500);    /* secondary text */
  --color-fg-3:           var(--color-brown-400);    /* muted text */
  --color-fg-invert:      var(--color-brown-700);    /* text on yellow */

  --color-border:         var(--color-brown-200);    /* #E8D070 */
  --color-border-light:   var(--color-yellow-100);

  --color-interactive:    var(--color-yellow-400);
  --color-interactive-hover: var(--color-yellow-300);
  --color-interactive-press: var(--color-yellow-500);

  --color-success:        var(--color-green);
  --color-warning:        var(--color-amber);
  --color-danger:         var(--color-red);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */

:root {
  /* --- Font Families --- */
  --font-display:   'Nunito', sans-serif;
  --font-body:      'Plus Jakarta Sans', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Mono', monospace;

  /* --- Font Weights --- */
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;
  --font-weight-black:      900;

  /* --- Type Scale (px → rem) --- */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.25rem;    /* 20px */
  --text-lg:    1.5rem;     /* 24px */
  --text-xl:    2rem;       /* 32px */
  --text-2xl:   2.5rem;     /* 40px */
  --text-3xl:   3.5rem;     /* 56px */
  --text-4xl:   4.5rem;     /* 72px */

  /* --- Line Heights --- */
  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  /* --- Letter Spacing --- */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.16em;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

:root {
  /* Display — big hero text */
  --style-display-font:     var(--font-display);
  --style-display-size:     var(--text-4xl);
  --style-display-weight:   var(--font-weight-black);
  --style-display-leading:  var(--leading-tight);
  --style-display-tracking: var(--tracking-tight);

  /* H1 */
  --style-h1-font:     var(--font-display);
  --style-h1-size:     var(--text-3xl);
  --style-h1-weight:   var(--font-weight-extrabold);
  --style-h1-leading:  var(--leading-tight);

  /* H2 */
  --style-h2-font:     var(--font-display);
  --style-h2-size:     var(--text-2xl);
  --style-h2-weight:   var(--font-weight-bold);
  --style-h2-leading:  var(--leading-snug);

  /* H3 */
  --style-h3-font:     var(--font-display);
  --style-h3-size:     var(--text-xl);
  --style-h3-weight:   var(--font-weight-bold);
  --style-h3-leading:  var(--leading-snug);

  /* H4 */
  --style-h4-font:     var(--font-body);
  --style-h4-size:     var(--text-lg);
  --style-h4-weight:   var(--font-weight-semibold);
  --style-h4-leading:  var(--leading-normal);

  /* Body Large */
  --style-body-lg-font:    var(--font-body);
  --style-body-lg-size:    var(--text-md);
  --style-body-lg-weight:  var(--font-weight-regular);
  --style-body-lg-leading: var(--leading-relaxed);

  /* Body */
  --style-body-font:    var(--font-body);
  --style-body-size:    var(--text-base);
  --style-body-weight:  var(--font-weight-regular);
  --style-body-leading: var(--leading-normal);

  /* Body Small */
  --style-body-sm-font:    var(--font-body);
  --style-body-sm-size:    var(--text-sm);
  --style-body-sm-weight:  var(--font-weight-regular);
  --style-body-sm-leading: var(--leading-normal);

  /* Label / Caption */
  --style-label-font:     var(--font-body);
  --style-label-size:     var(--text-xs);
  --style-label-weight:   var(--font-weight-semibold);
  --style-label-leading:  var(--leading-normal);
  --style-label-tracking: var(--tracking-widest);
  --style-label-transform: uppercase;

  /* Overline / Sub-brand */
  --style-overline-font:     var(--font-display);
  --style-overline-size:     var(--text-xs);
  --style-overline-weight:   var(--font-weight-black);
  --style-overline-tracking: var(--tracking-widest);
  --style-overline-transform: uppercase;
}

/* ============================================================
   SPACING TOKENS
   ============================================================ */

:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
}

/* ============================================================
   BORDER RADIUS TOKENS
   ============================================================ */

:root {
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     24px;
  --radius-pill:   9999px;
}

/* ============================================================
   SHADOW / ELEVATION TOKENS
   ============================================================ */

:root {
  --shadow-0:  none;
  --shadow-1:  0 2px 6px rgba(43, 26, 0, 0.08);
  --shadow-2:  0 4px 16px rgba(43, 26, 0, 0.12);
  --shadow-3:  0 12px 40px rgba(43, 26, 0, 0.16);
}

/* ============================================================
   BASE STYLES (opt-in via .bk-base class on <body>)
   ============================================================ */

.bk-base {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-fg-1);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bk-base h1 {
  font-family: var(--style-h1-font);
  font-size: var(--style-h1-size);
  font-weight: var(--style-h1-weight);
  line-height: var(--style-h1-leading);
  color: var(--color-fg-1);
}

.bk-base h2 {
  font-family: var(--style-h2-font);
  font-size: var(--style-h2-size);
  font-weight: var(--style-h2-weight);
  line-height: var(--style-h2-leading);
}

.bk-base h3 {
  font-family: var(--style-h3-font);
  font-size: var(--style-h3-size);
  font-weight: var(--style-h3-weight);
  line-height: var(--style-h3-leading);
}

.bk-base p {
  font-family: var(--style-body-font);
  font-size: var(--style-body-size);
  line-height: var(--style-body-leading);
  color: var(--color-fg-2);
}