/* ==========================================================================
   CHALANT DESIGN TOKENS
   Source of truth: COLORS.pdf, approved 2026-09-11
   Verified against: CHALANT - BRAND IN ACTION.pdf, chalant.us computed styles
   ========================================================================== */

:root {
  /* ---- Core palette ---------------------------------------------------- */
  /* The seven approved brand colours. COLORS.pdf, approved 2026-09-11.        */
  --chalant-ember-red:     #e31517;
  --chalant-cobalt:        #2a4999;
  --chalant-clarity-sky:   #83caea;
  --chalant-vibrant-spark: #e9e21d;
  --chalant-periwinkle:    #c0bcdf;
  --chalant-core-onyx:     #181818;
  --chalant-canvas-light:  #f8f4f3;

  /* ---- Semantic surfaces ----------------------------------------------- */
  --surface-base:      #000000; /* chalant.us body background */
  --surface-raised:    #05080c; /* card / section surface on the live site */
  --surface-onyx:      var(--chalant-core-onyx);
  --surface-hairline:  rgba(248, 244, 243, 0.12);
  --surface-glass:     rgba(255, 255, 255, 0.06);
  --surface-glass-hi:  rgba(255, 255, 255, 0.10);
  --surface-checker-a: #0a0a0b; /* alpha-preview checkerboard, docs UI only */
  --surface-checker-b: #171719;
  --text-on-light-muted: #6b6b70; /* muted label when a panel is Canvas Light */

  /* ---- Semantic text ---------------------------------------------------- */
  --text-primary:   var(--chalant-canvas-light); /* never pure white */
  --text-muted:     #aaa9ad;
  --text-faint:     rgba(248, 244, 243, 0.5);
  --text-inverse:   var(--chalant-core-onyx);
  --text-accent:    var(--chalant-vibrant-spark);

  /* ---- Signature gradient ------------------------------------------------ */
  /* Exact stops lifted from GRADIENT_LOGO_HORIZONTAL_SVG.svg.                */
  --chalant-gradient: linear-gradient(
    100deg,
    #181818 0%,
    #e31517 14%,
    #2a4999 30%,
    #83caea 49%,
    #e9e21d 67%,
    #c0bcdf 84%,
    #f8f4f3 100%
  );
  /* PROTOTYPES ONLY. Flat CSS gradients are not the brand.
     Ship a real grained texture from assets/gradients/with-grain/. */

  /* ---- Asset library paths ----------------------------------------------- */
  --assets-gradients-grain:       'assets/gradients/with-grain';   /* 26, default */
  --assets-gradients-nograin:     'assets/gradients/no-grain';     /* 24 */
  --assets-gradients-transparent: 'assets/gradients/transparent';  /* 12, alpha PNG */
  --assets-glass:                 'assets/glass';                  /* 21, G1-G7 */
  --assets-logos:                 'assets/logos';                  /* 40 SVG */
  --assets-fonts:                 'assets/fonts';                  /* 3 variable fonts */

  /* Ready-made background shorthands for the two most common gradient forms. */
  --bg-cover-gradient: url('assets/gradients/with-grain/gradient-fullblack-background-2.jpg') center/cover no-repeat;
  --bg-ribbon-wave:    url('assets/gradients/with-grain/gradient-onyxbackground-6.jpg') center bottom/cover no-repeat;

  /* ---- Typography -------------------------------------------------------- */
  /* Self-host from assets/fonts/. Do not load these from a CDN. See BRAND.md section 3.
     Space Grotesk is width-stable: 0.23% width change across its whole 300-700 range, so you
     can swap or animate weight mid-line with no reflow. DM Sans moves 26%. Never do it there. */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  --fs-hero:    clamp(3.5rem, 11vw, 12.8rem); /* live site tops out at 205px */
  --fs-display: clamp(2.75rem, 6vw, 5.5rem);  /* 88px */
  --fs-h1:      clamp(2.25rem, 4.5vw, 3.9375rem); /* 63px */
  --fs-h2:      2.5rem;   /* 40px */
  --fs-h3:      2rem;     /* 32px */
  --fs-h4:      1.375rem; /* 22px */
  --fs-lead:    1.25rem;  /* 20px */
  --fs-body:    1rem;     /* 16px */ /* set in DM Sans 500 Medium, not 400. See BRAND.md */
  --fs-small:   0.875rem; /* 14px */
  --fs-caption: 0.75rem;  /* 12px */

  /* The live site tracks negative at every size: -4% display, -2% text. */
  --track-display: -0.04em;
  --track-text:    -0.02em;

  --lh-tight: 0.95;
  --lh-snug:  1.15;
  --lh-body:  1.55;

  /* Space Grotesk wght axis is 300-700. There is no 800 or 900. Do not spec one.
     DM Sans wght axis is 100-1000, but the brand does not go above 700. */
  --fw-light:    300; /* Space Grotesk axis floor and its default instance */
  --fw-regular:  400;
  --fw-medium:   500; /* dominant weight in BOTH families. This is the body weight. */
  --fw-semibold: 600;
  --fw-bold:     700; /* Space Grotesk axis ceiling */

  /* ---- Radii ------------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   40px;  /* most common card radius on chalant.us */
  --radius-pill: 500px;

  /* ---- Spacing ----------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;  /* deck safe margin */
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Deck geometry ------------------------------------------------------ */
  --deck-w: 1920px;
  --deck-h: 1080px;
  --deck-safe: 64px;
  --deck-header-h: 67px;
  --carousel-ratio: 4 / 5; /* 1080 x 1350 */

  /* ---- Responsive ---------------------------------------------------------
     860px is the brand's primary breakpoint. Every grid collapses there. */
  --bp-mobile:     640px;
  --bp-tablet:     860px;
  --container-max: 1200px;
  --touch-target:  44px;   /* accessibility floor, outranks visual preference */
  --nav-height:    68px;
  --nav-scrim:     rgba(0, 0, 0, 0.72);
  --nav-tracking:  0.12em; /* the ONE positive tracking in the brand: uppercase 12px nav */
}

/* DM Sans opsz axis defaults to 9 (small-text optical size). Keep auto so the browser
   tracks it to the rendered size. Explicit here so it survives resets and print CSS. */
html { font-optical-sizing: auto; }

/* ==========================================================================
   COMPONENT RECIPES
   Measured off live chalant.us. Use these instead of inventing new component
   colour. Full reasoning in BRAND.md sections 2 and 3.
   ========================================================================== */

/* Body copy. Note the weight: Medium 500, not Regular 400. */
.chalant-body {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-text);
  color: var(--text-primary);
}
.chalant-body strong { font-weight: var(--fw-bold); }

/* Buttons are always full pills. There is no square button in this brand. */
.chalant-btn {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  letter-spacing: var(--track-text);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
/* One primary per screen. If two things look primary, neither is. */
.chalant-btn--primary   { background: var(--chalant-canvas-light); color: var(--chalant-core-onyx); }
.chalant-btn--secondary { background: var(--chalant-clarity-sky);  color: var(--chalant-core-onyx); }
.chalant-btn--utility   { background: var(--surface-raised);       color: var(--text-primary); }

/* Eyebrow / section label. Scanned, so Space Grotesk. */
.chalant-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-muted);
}

/* The single permitted text accent. Once per screen, one word or one symbol. */
.chalant-spark { color: var(--chalant-vibrant-spark); }

/* ==========================================================================
   FORM FIELDS
   Added after three agent builds each invented their own field chrome.
   Fields are NOT pills. Only buttons are pills.
   ========================================================================== */
.chalant-field       { display: grid; gap: var(--space-2); }
.chalant-field label { font-family: var(--font-display); font-weight: var(--fw-regular);
                       font-size: var(--fs-small); color: var(--text-primary);
                       letter-spacing: var(--track-text); }

.chalant-input {
  background: var(--surface-base);          /* a well, one step darker than the card */
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);                /* never below 16px: iOS zooms smaller inputs */
  letter-spacing: var(--track-text);
  border: 1px solid var(--surface-hairline);
  border-radius: var(--radius-sm);          /* 10px. Not a pill. */
  padding: 14px 16px;
  width: 100%;
}
.chalant-input::placeholder { color: var(--text-faint); }

/* Focus is never optional. Same ring on every interactive element. */
.chalant-input:focus-visible,
.chalant-btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--chalant-vibrant-spark);
  outline-offset: 2px;
}

.chalant-input[aria-invalid="true"] { border-color: var(--chalant-ember-red); }
.chalant-input:disabled            { opacity: .5; cursor: not-allowed; }

.chalant-error { color: var(--chalant-ember-red); font-family: var(--font-body);
                 font-weight: var(--fw-regular); font-size: var(--fs-small); }
.chalant-hint  { color: var(--text-muted); font-family: var(--font-body);
                 font-weight: var(--fw-regular); font-size: var(--fs-small); }

textarea.chalant-input { min-height: 120px; resize: vertical; }

/* ==========================================================================
   BUTTON ADDITIONS
   ========================================================================== */
/* Measured off the live site: secondary shifts to Vibrant Spark on hover.
   Primary now does the same move; it previously had none and agents invented one. */
.chalant-btn--primary:hover,
.chalant-btn--secondary:hover { background: var(--chalant-vibrant-spark); }

/* A utility button on a raised card is invisible; both are #05080c.
   This is the correct tertiary action inside a card. */
.chalant-btn--outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--surface-hairline);
}
.chalant-btn--outline:hover { border-color: var(--text-faint); }

.chalant-btn:disabled,
.chalant-btn[aria-disabled="true"] {
  background: var(--surface-raised);
  color: var(--text-muted);
  opacity: .5;
  cursor: not-allowed;
}

/* Anything tappable clears the accessibility floor. */
.chalant-btn, .chalant-input, .chalant-nav a {
  min-height: var(--touch-target);
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.chalant-nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-height);
  background: var(--nav-scrim);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--surface-hairline);
}
.chalant-nav a {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking); /* positive, on purpose */
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.chalant-nav a:hover { color: var(--chalant-vibrant-spark); }

/* Featured card: lift the fill. Never a glow, scale, or shadow. */
.chalant-card--featured { background: var(--surface-onyx); }

/* Native select arrows are off-brand. Ship the chevron so nobody redraws it.
   Requested by two separate agent builds. */
select.chalant-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23aaa9ad' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

/* ==========================================================================
   GRADIENT PLACEMENT
   Added after an agent wrote `top right/60% auto` and produced a hard vertical
   seam down the middle of a section.

   THE RULE: gradient textures are 1920x1080 photographic images. Always place
   them FULL BLEED with `cover`. Shape them with a MASK, never by shrinking
   background-size. A percentage or `auto` size leaves a rectangular edge that
   reads as a broken image, not as light.
   ========================================================================== */

/* Shared base. Every gradient layer is an absolutely positioned full-bleed
   sibling behind content, never a background on the content box itself. */
.chalant-grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-position: center;
  background-size: cover;      /* never auto, never a percentage */
  background-repeat: no-repeat;
  z-index: 0;
}
.chalant-grad + * { position: relative; z-index: 1; }

/* 1. Full-bleed atmospheric. Covers and closing sections. */
.chalant-grad--cover { }

/* 2. Bottom ribbon wave. The workhorse. Full width, faded upward. */
.chalant-grad--ribbon {
  inset: auto 0 0 0;
  height: 60%;
  background-position: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%);
          mask-image: linear-gradient(to top, #000 45%, transparent 100%);
}

/* 3. Corner bloom. Still full-bleed; the RADIAL MASK does the shaping,
      so there is no hard edge anywhere. */
.chalant-grad--bloom-right {
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 75%);
          mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 75%);
}
.chalant-grad--bloom-left {
  -webkit-mask-image: radial-gradient(120% 100% at 0% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 75%);
          mask-image: radial-gradient(120% 100% at 0% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 75%);
}

/* Mirror when you need the dark mass on the other side. */
.chalant-grad--flip { transform: scaleX(-1); }

/* Scrim over a gradient so type stays legible. The dark must still dominate. */
.chalant-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(95deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 26%,
                                     rgba(0,0,0,.42) 52%, rgba(0,0,0,.12) 78%, transparent 100%);
}

/* Any section hosting a gradient layer needs these two. */
.chalant-section { position: relative; overflow: hidden; }