/* ============================================================
   Albatross Invest — brand tokens
   Source: Brand Guidelines.pdf (Albatross Lending Group)

       <link rel="stylesheet" href="../brand/brand.css">

   Type rule worth knowing before you style anything: the guidelines use the
   DISPLAY SERIF for nearly all interface text — headings, eyebrow labels,
   card labels, swatch names and button labels. The sans is reserved for
   running body copy, and DM Mono for figures. Setting labels in the sans is
   the single easiest way to make a page stop looking like the brand.
   ============================================================ */

@import url('fonts/fonts.css');

:root {
  /* ---- core palette (the five named brand colours) ---- */
  --ai-navy:        #0d1322;  /* Albatross Navy */
  --ai-sky:         #7db0c4;  /* Sky Blue       */
  --ai-teal:        #32837f;  /* Slate Teal     */
  --ai-mist:        #eaf5f7;  /* Mist           */
  --ai-slate:       #687382;  /* Slate          */

  /* ---- supporting neutrals (used in the guidelines, never formally named) ---- */
  --ai-white:       #ffffff;  /* primary page background */
  --ai-bone:        #eeeeea;  /* alternating section background */
  --ai-sage:        #a3c3bf;  /* eyebrow pill fill = Slate Teal at 40% over Bone */
  /* Sampled from the guidelines card artwork, where it carries the Defensive
     portfolio. It is the one hue outside the five named colours, so it is
     reserved for identifying a fund and is never a UI surface. Not yet written
     into COLOURS.md as a named colour: see the pending note there. */
  --ai-clay:        #cb7465;  /* Clay, the burnt orange of the fund cards */

  /* ---- semantic roles: prefer these in page CSS over the raw colours ---- */
  --ai-bg:              var(--ai-white);
  --ai-bg-alt:          var(--ai-bone);
  --ai-bg-tint:         var(--ai-mist);
  --ai-bg-inverse:      var(--ai-navy);

  --ai-text:            var(--ai-navy);
  --ai-text-body:       var(--ai-slate);   /* running copy, not headings */
  --ai-text-muted:      var(--ai-slate);
  --ai-text-on-dark:    var(--ai-white);
  --ai-accent-on-dark:  var(--ai-sky);
  --ai-label:           var(--ai-teal);    /* eyebrow + sub-labels on light */
  --ai-label-on-dark:   var(--ai-sky);     /* card labels on navy or mist */

  --ai-rule:            #dde3e6;
  --ai-accent:          var(--ai-sky);
  --ai-accent-2:        var(--ai-teal);

  /* ---- type stacks: licensed brand face first, open fallback second ---- */
  --ai-font-display: 'The Seasons', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ai-font-body:    'Acumin Variable Concept', 'Acumin Pro', Inter, -apple-system,
                     BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* Figures. Acumin with tabular figures: the columns still line up, but the
     zero is a plain zero. DM Mono draws a slashed zero and carries no feature
     to turn it off — its only zero glyph is the slashed one. */
  --ai-font-data:    'Acumin Variable Concept', 'Acumin Pro', Inter, -apple-system,
                     BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---- type roles ---- */
.ai-display { font-family: var(--ai-font-display); font-weight: 400; letter-spacing: -0.005em; line-height: 1.08; color: var(--ai-text); }
.ai-body    { font-family: var(--ai-font-body);    font-weight: 400; line-height: 1.6; color: var(--ai-text-body); }
.ai-data    { font-family: var(--ai-font-data);    font-weight: 400; font-variant-numeric: tabular-nums; }

/* Section heading with the short rule that sits under it throughout the guidelines */
.ai-heading { font-family: var(--ai-font-display); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--ai-text); margin: 10px 0 0; }
.ai-heading + .ai-rule,
.ai-rule { width: 62px; height: 2px; background: var(--ai-navy); border: 0; margin: 14px 0 0; }

/* Eyebrow label. Serif, letterspaced, Slate Teal — NOT the sans.
   Add --pill for the sage capsule used above the major section headings. */
.ai-eyebrow {
  font-family: var(--ai-font-display);
  font-size: 13px; font-weight: 400;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ai-label);
}
.ai-eyebrow--pill {
  display: inline-block;
  background: var(--ai-sage);
  border-radius: 7px;
  padding: 8px 17px;
  font-size: 12px;
}

/* Label inside a card, e.g. "DISPLAY - THE SEASONS". Serif, Sky Blue. */
.ai-card-label {
  font-family: var(--ai-font-display);
  font-size: 14px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ai-label-on-dark);
}

/* ---- buttons: display serif, sentence case ---- */
.ai-btn {
  font-family: var(--ai-font-display);
  font-size: 17px; line-height: 1;
  padding: 18px 30px; border-radius: 7px; border: 1px solid transparent;
  cursor: pointer; display: inline-block; text-decoration: none;
}
.ai-btn--primary   { background: var(--ai-navy);  color: var(--ai-white); }
.ai-btn--secondary { background: var(--ai-mist);  color: var(--ai-navy); border-color: #d2e6ec; }
.ai-btn--tertiary  { background: var(--ai-slate); color: var(--ai-white); }