/* ============================================================
   Discovery Accounting — Colors & Type
   Direction H2 "Lifted" — approved May 2026
   ============================================================ */

/* ---------- Font loading -----------------------------------
   IBM Plex Sans is now the system face for everything except
   the wordmark. Sansation is retained only for legacy print
   collateral that has already shipped (see notes in README). */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap");

@font-face {
  font-family: "Cupertino";
  src: url("fonts/Cupertino.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Sansation kept available for legacy use — not the default. */
@font-face {
  font-family: "Sansation";
  src: url("fonts/Sansation-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sansation";
  src: url("fonts/Sansation-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sansation";
  src: url("fonts/Sansation-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Brand purples (the anchor) ------------------- */
  /* Lifted aubergine — modernized a few steps warmer/lighter
     than the original #540D4D. Still recognizably the brand,
     but no longer feels like 2008. */
  --da-purple:           #6B1A6A;   /* Primary brand purple (display, headings) */
  --da-purple-deep:      #4A1644;   /* Deepest aubergine — dark panels, monogram */
  --da-purple-mid:       #8E3F88;   /* Mid mauve — secondary accents */
  --da-purple-light:     #B96BAF;   /* Bright mauve highlight */
  --da-purple-tint:      #F5ECF4;   /* 8% tint — subtle backgrounds */

  /* Legacy heritage purple — for matching to printed collateral
     that has already shipped. Do NOT use for new design work. */
  --da-purple-legacy:    #540D4D;

  /* ---------- Brand greens --------------------------------- */
  --da-green:            #34A848;   /* Primary brand green */
  --da-green-bright:     #39B54A;   /* Peak green — bands */
  --da-green-deep:       #006838;   /* Dark forest green */
  --da-green-mid:        #14803F;   /* Mid green */
  --da-green-tint:       #ECF6EE;   /* Subtle green tint */

  /* ---------- New rainbow accents (added May 2026) --------- */
  --da-magenta:          #B41673;   /* The "magic" hue */
  --da-magenta-tint:     #F8E7F1;
  --da-orange:           #FE912F;   /* The "momentum" hue */
  --da-orange-tint:      #FEF0E0;
  --da-teal:             #02A2AF;   /* The "clarity" hue */
  --da-teal-tint:        #DDF2F4;
  --da-teal-deep:        #017580;   /* Deep teal variant */
  --da-yellow:           #E8B33C;   /* Warm gold — complements orange without competing */
  --da-yellow-tint:      #FBF1D9;

  /* The full ordered rainbow (left → right). Used for the
     evolved ribbon, color swatches, and the focus-emphasis
     word-coloring rule. Order is intentional — runs warm
     through to cool, with purple anchoring the start. */
  --da-rainbow-1:        var(--da-purple);    /* #6B1A6A */
  --da-rainbow-2:        var(--da-magenta);   /* #B41673 */
  --da-rainbow-3:        var(--da-orange);    /* #FE912F */
  --da-rainbow-4:        var(--da-green);     /* #34A848 */
  --da-rainbow-5:        var(--da-teal);      /* #02A2AF */

  /* ---------- Gradients ------------------------------------ */
  /* The brand's heritage gradient — softer / less heavy than
     the original. Use sparingly; rainbow word coloring is now
     the primary signature device. */
  --da-grad-purple: linear-gradient(180deg, #4A1644 0%, #6B1A6A 55%, #8E3F88 100%); /* @kind color */
  --da-grad-green:  linear-gradient(180deg, #39B54A 0%, #14803F 60%, #006838 100%); /* @kind color */
  --da-grad-rainbow: linear-gradient(90deg,
      #6B1A6A 0%, #B41673 28%, #FE912F 52%, #34A848 76%, #02A2AF 100%); /* @kind color */
  --da-grad-rainbow-soft: linear-gradient(90deg,
      rgba(107,26,106,0) 0%, #6B1A6A 8%, #B41673 30%,
      #FE912F 52%, #34A848 76%, #02A2AF 95%, rgba(2,162,175,0) 100%); /* @kind color */

  /* ---------- Neutrals ------------------------------------- */
  --da-ink:              #1F1A1E;   /* Primary text (warm near-black) */
  --da-ink-soft:         #3D363B;   /* Secondary text */
  --da-muted:            #6E7072;   /* Tagline / metadata gray */
  --da-line:             #D9D4D8;   /* Hairline borders, warm */
  --da-line-soft:        #E8E4E7;   /* Even softer hairlines */
  --da-surface:          #FFFFFF;   /* Cards */
  --da-canvas:           #FBF7FA;   /* Page background — warm off-white */
  --da-canvas-warm:      #F6F1F4;   /* Alt warm surface */

  /* ---------- Semantic ------------------------------------- */
  --color-bg:            var(--da-canvas);
  --color-surface:       var(--da-surface);
  --color-text:          var(--da-ink);
  --color-text-muted:    var(--da-muted);
  --color-border:        var(--da-line);
  --color-primary:       var(--da-purple);
  --color-primary-ink:   #FFFFFF;
  --color-accent:        var(--da-green);
  --color-accent-ink:    #FFFFFF;
  --color-success:       var(--da-green-mid);
  --color-warning:       var(--da-orange);
  --color-danger:        #B83A4E;
  --color-info:          var(--da-teal);
  --color-focus:         var(--da-magenta);  /* the "draw the eye" hue */

  /* ---------- Type families -------------------------------- */
  /* Cupertino is reserved for the wordmark / logo only.
     Sansation is legacy — do not use for new design. */
  --font-wordmark:       "Cupertino", "IBM Plex Sans", system-ui, sans-serif;
  --font-display:        "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:           "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:           "IBM Plex Mono", "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ---------- Type scale (1.25 — major third) -------------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   46px;
  --fs-4xl:   60px;
  --fs-5xl:   76px;

  --lh-tight:   1.05; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-normal:  1.5;  /* @kind font */
  --lh-loose:   1.7;  /* @kind font */

  --tracking-tagline: 0.18em;
  --tracking-eyebrow: 0.16em;
  --tracking-tight:  -0.02em;
  --tracking-display: -0.03em;

  /* ---------- Spacing (4px base) --------------------------- */
  --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;

  /* ---------- Radius --------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ---------- Shadows (warm-tinted with lifted purple) ----- */
  --shadow-xs:  0 1px 2px rgba(107,26,106,0.06);
  --shadow-sm:  0 2px 6px rgba(107,26,106,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 8px 20px rgba(107,26,106,0.10), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:  0 18px 40px rgba(107,26,106,0.14), 0 6px 12px rgba(0,0,0,0.05);
  --shadow-inset-line: inset 0 0 0 1px rgba(107,26,106,0.10);

  /* ---------- Motion --------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in:     cubic-bezier(0.55, 0.06, 0.68, 0.19); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   380ms; /* @kind other */
}

/* ============================================================
   Semantic type styles
   ============================================================ */
.da-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--da-purple);
}
.da-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.da-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--da-purple);
}
.da-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--da-ink);
}
.da-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--da-ink);
}
.da-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--da-ink);
}
.da-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--da-ink-soft);
}
.da-body-lg {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--da-ink-soft);
}
.da-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--da-muted);
}
.da-tagline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--da-purple);
  letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 10px;
}
.da-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--da-magenta);
  letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.da-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor;
}
.da-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--da-ink-soft);
}

/* ============================================================
   The rainbow word-color rule  — the brand's new signature
   ------------------------------------------------------------
   Use to draw the eye to the words that carry the *value*
   (clarity, momentum, transformation, magic, better, etc.)
   — never to color the words that name the *service*
   (bookkeeping, payroll, recon, etc.).

   Drop .rainbow on a headline. Then wrap each word you want
   to highlight in <span class="rb rb-N"> where N is 1–5.
   Words outside spans inherit normal ink color.

   Use sparingly — at most one rainbow headline per surface.
   ============================================================ */
.rainbow .rb        { font-weight: inherit; }
.rainbow .rb-1      { color: var(--da-rainbow-1); }
.rainbow .rb-2      { color: var(--da-rainbow-2); }
.rainbow .rb-3      { color: var(--da-rainbow-3); }
.rainbow .rb-4      { color: var(--da-rainbow-4); }
.rainbow .rb-5      { color: var(--da-rainbow-5); }

/* Optional: a single word can wear the full gradient. Use this
   only for the *one* magic word on a page — never more. */
.rb-shimmer {
  background: var(--da-grad-rainbow);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 600;
}

/* Strike-through device — used to say "we don't sell X".
   The struck word is muted, never colored. */
.rb-strike {
  color: var(--da-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--da-muted);
}

/* ============================================================
   The evolved ribbon
   ------------------------------------------------------------
   The angled green ribbon from the original print identity has
   been thinned and recolored to a soft 1px–3px rainbow wisp at
   the top of hero surfaces. Use the .da-ribbon utility for the
   default top placement, or compose your own with the
   --da-grad-rainbow-soft variable.
   ============================================================ */
.da-ribbon {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: var(--da-grad-rainbow-soft);
}