/* ============================================================
   L Brother — Design tokens
   Corporate navy palette derived from the logo.
   Loaded first: every other stylesheet depends on these vars.
   ============================================================ */

/* ------------------------------------------------------------
   Fonts — Gilroy family
   ------------------------------------------------------------ */

@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------
   Tokens
   ------------------------------------------------------------ */

:root {
  /* Surfaces — corporate navy + cool gray, taken from the logo */
  --canvas: #EBEEF4;  /* cool light page background */
  --lifted: #FFFFFF;  /* raised cards and panels */
  --white:  #FFFFFF;
  --bone:   #F1F3F8;
  --ink:    #2E3A56;  /* deep navy — body text and dark surfaces */
  --footer: #222B40;  /* deepest navy — footer background */

  /* Text */
  --slate:   #5E6886; /* muted navy-gray — secondary copy */
  --granite: #3C4663; /* strong secondary — labels, leads */
  --whisper: #D7DCE8; /* ghost watermark numerals on light */

  /* Accent — the brand navy, used sparingly */
  --accent:      #3D4B69; /* logo navy — dots, quotes, signals */
  --accent-soft: #8290B4; /* steel — orbital arcs, glows, hover cues */
  --tint:        #E2E7F1; /* soft cool tint surface */

  /* Hairlines */
  --line:        rgba(46, 58, 86, .14);
  --line-strong: rgba(46, 58, 86, .26);

  /* Corner radii */
  --r-btn:  22px;
  --r-card: 40px;
  --r-md:   18px;
  --r-pill: 999px;

  /* Shadows */
  --sh-nav:  rgba(34, 43, 64, .07) 0 6px 28px 0;
  --sh-card: rgba(34, 43, 64, .12) 0 24px 56px 0;
  --sh-pop:  rgba(34, 43, 64, .20) 0 40px 90px 0;

  /* Typography */
  --font: "Gilroy", "Sofia Sans", -apple-system, system-ui, sans-serif;
  --tr-tight: -0.02em;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 72px);

  /* Easing */
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------
   Tweakable hooks
   The Tweaks panel writes to these at runtime, so components
   should reference --tw-* rather than the raw tokens above.
   ------------------------------------------------------------ */

:root {
  --tw-accent:       var(--accent);
  --tw-accent-soft:  var(--accent-soft);
  --tw-canvas:       var(--canvas);
  --tw-ink:          var(--ink);
  --tw-radius-scale: 1;
  --tw-type-scale:   1;
}