/* ============================================================
   CLUECRAFT : "Case File" system
   ------------------------------------------------------------
   COLOUR: the Cluecraft brand palette ("Case Board", direction
   F1 : bone-led) is defined once in the BRAND block below and is
   the single source of truth. Helix (tokens.css) has no bone /
   navy / oxblood, so colour no longer resolves from it : but
   radii, shadows and spacing still do. Never hard-code a colour
   outside this block; add a --cc-* token instead.

   Three grounds:
     .section        → --cc-paper    (bone)
     .section.tint   → --cc-paper-2  (bone tint)
     .section.dark   → --cc-ink      (navy)
   ============================================================ */

:root {
  /* ---- BRAND: raw palette (edit colour HERE and nowhere else) ---- */
  --cc-bone:          #f2ede3;   /* default light ground            */
  --cc-bone-2:        #dfd3bb;   /* alternating light section : a real
                                    step down from bone, not a whisper.
                                    As dark as it can go and still keep
                                    the muted kicker colour at AA.     */
  --cc-bone-raised:   #faf8f2;   /* card sitting on bone            */
  --cc-bone-line:     #cec5b3;
  --cc-bone-line-2:   #b9ae94;

  --cc-navy:          #0f1529;   /* dark ground                     */
  --cc-navy-2:        #1a2340;   /* raised panel on navy            */
  --cc-navy-line:     #2c3757;
  --cc-navy-line-2:   #3c4a70;

  --cc-card:          #efe9db;   /* evidence card stock: identical
                                    on both grounds, so the packs
                                    read as the same object         */
  --cc-card-line:     #b9ae94;
  --cc-card-ink:      #141619;
  --cc-card-ink-2:    #6d6553;

  /* the FOLDER is a deeper, warmer manila than the paper inside it.
     Keeping them different is what stops the pack looking flat.      */
  --cc-folder:        #e4c894;
  --cc-folder-2:      #d9b878;   /* foot of the gradient            */
  --cc-folder-tab:    #e9d0a0;   /* tab catches a little more light */
  --cc-folder-edge:   #b8944f;
  --cc-folder-ink:    #6b5326;

  --cc-ox:            #a32e1f;   /* brand red, light grounds  6.5:1 */
  --cc-ox-hover:      #872417;
  --cc-ox-lift:       #c9372a;   /* same red raised for navy  5.1:1 */
  --cc-ox-lift-hover: #b02f23;
  --cc-string:        #e23d2e;   /* stamps + hairlines on navy ONLY:
                                    never sits behind text          */
  --cc-red-on-dark:   #f4796a;   /* error TEXT on navy : 5.7:1 on the
                                    navy panel, where --cc-string
                                    would only manage 3.7:1         */

  --cc-amber-ink:     #8a5c0d;   /* small amber text : AA on bone   */
  --cc-amber-strong:  #a06a10;   /* large display amber only        */
  --cc-amber-dk:      #e8a33d;   /* amber on navy                   */
  --cc-amber-tag:     #ead9b4;   /* evidence-tag fill               */
  --cc-amber-tag-ln:  #b58c3c;
  --cc-amber-tag-ink: #6b4708;

  /* ---- grounds ---- */
  --cc-paper:        var(--cc-bone);
  --cc-paper-2:      var(--cc-bone-2);
  --cc-blank:        var(--cc-bone-raised);
  --cc-ink:          var(--cc-navy);

  /* ---- dossier / card stock ---- */
  --cc-manila:       var(--cc-folder);
  --cc-manila-2:     #e6dfcd;
  --cc-manila-edge:  var(--cc-folder-edge);
  --cc-manila-ink:   var(--cc-folder-ink);

  /* ---- evidence amber ---- */
  --cc-amber:        var(--cc-amber-dk);
  --cc-amber-soft:   var(--cc-amber-tag);
  --cc-amber-edge:   var(--cc-amber-tag-ln);

  /* ---- classified red ---- */
  --cc-red:          var(--cc-ox);
  --cc-red-soft:     #f3e2dd;
  --cc-red-edge:     var(--cc-ox);
  --cc-red-ink:      var(--cc-ox);

  /* ---- brand red : the single primary CTA ---- */
  --cc-brand:        var(--cc-ox);
  --cc-brand-hover:  var(--cc-ox-hover);

  /* ---- text on light grounds ---- */
  --cc-text:   var(--cc-card-ink);
  --cc-text-2: #3f444b;
  --cc-text-3: #545a62;
  --cc-text-4: #52585f;          /* AA on BOTH bone (6.1:1) and the
                                    deepened bone tint (4.8:1)      */
  --cc-blank-text: #fdf6ee;      /* text on a filled oxblood button */

  --cc-line:   var(--cc-bone-line);
  --cc-line-2: var(--cc-bone-line-2);

  /* ---- text + lines on the navy ground ---- */
  --cc-on-dark:     #f2f4fb;
  --cc-on-dark-2:   #a4aecb;
  --cc-on-dark-3:   #8994b4;     /* AA on BOTH navy (6.1:1) and the
                                    lighter navy panel (5.1:1)      */
  --cc-on-dark-4:   #737ea6;     /* 4.6:1 on navy : AA for legal/placeholder */
  --cc-dark-line:   var(--cc-navy-line);
  --cc-dark-line-2: var(--cc-navy-line-2);
  --cc-dark-panel:  var(--cc-navy-2);
  --cc-dark-raise:  #1f2949;     /* hover state for navy panels     */

  --cc-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --cc-sans: 'Karla', system-ui, sans-serif;
  --cc-serif: 'Lato', Georgia, serif;
}

* { box-sizing: border-box; }

.cc-root {
  font-family: var(--cc-sans);
  color: var(--cc-text);
  background: var(--cc-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- textures ------------------------------------------------ */
.cc-grid {
  background-image:
    linear-gradient(rgb(20 22 25 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(20 22 25 / 0.045) 1px, transparent 1px);
  background-size: 30px 30px;
}
.cc-grid-dark {
  background-image:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
}
.cc-paperfade::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 80% -10%, rgb(160 106 16 / 0.07), transparent 60%),
    radial-gradient(100% 70% at 0% 110%, rgb(15 21 41 / 0.05), transparent 55%);
}

/* ---- mono labels & kickers ----------------------------------- */
.cc-kicker {
  font-family: var(--cc-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cc-text-4);
}
.cc-kicker .dot { color: var(--cc-amber-ink); }
.cc-casefile {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--cc-mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cc-text-3);
}
.cc-casefile b { color: var(--cc-text); font-weight: 600; }
.cc-casefile .sep { width: 18px; height: 1px; background: var(--cc-line-2); }

.dark .cc-kicker { color: var(--cc-on-dark-3); }
.dark .cc-kicker .dot { color: var(--cc-amber-dk); }
.dark .cc-casefile { color: var(--cc-on-dark-2); }
.dark .cc-casefile b { color: var(--cc-on-dark); }
.dark .cc-casefile .sep { background: var(--cc-dark-line-2); }

/* ---- classified stamp ---------------------------------------- */
.cc-stamp {
  display: inline-block;
  font-family: var(--cc-mono); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cc-red-ink);
  border: 2px solid var(--cc-red-edge);
  padding: 5px 10px; border-radius: 3px;
  font-size: 12px; line-height: 1;
  transform: rotate(-7deg);
  opacity: 0.9;
}
/* on navy the stamp switches to string red : decorative, not text-critical */
.dark .cc-stamp { color: var(--cc-string); border-color: var(--cc-string); }

/* ---- evidence tag (physical, with punched hole) -------------- */
.cc-tag {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 26px;
  background: var(--cc-amber-soft);
  border: 1px solid var(--cc-amber-edge);
  color: var(--cc-amber-tag-ink);
  font-family: var(--cc-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  border-radius: 3px;
}
.cc-tag::before {
  content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cc-card); border: 1.5px solid var(--cc-amber-edge);
}

/* ---- topic chips --------------------------------------------- */
.cc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--cc-line);
  background: var(--cc-blank);
  color: var(--cc-text-2);
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
}
.cc-chip .n {
  font-family: var(--cc-mono); font-size: 11px; color: var(--cc-amber-ink);
  letter-spacing: 0.05em;
}
.cc-chip-dark {
  border-color: var(--cc-dark-line);
  background: var(--cc-dark-panel);
  color: var(--cc-on-dark-2);
}
.cc-chip-dark .n { color: var(--cc-amber-dk); }

/* ---- buttons (Helix Button, large) --------------------------- */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 22px;
  font-family: var(--cc-sans); font-weight: 600; font-size: 16px;
  border-radius: var(--helix-radius-x-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  text-decoration: none; transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.cc-btn svg { width: 18px; height: 18px; }
.cc-btn-primary { background: var(--cc-brand); color: var(--cc-blank-text); }
.cc-btn-primary:hover { background: var(--cc-brand-hover); }
/* on navy the CTA lifts to the raised red so it keeps AA against cream */
.dark .cc-btn-primary { background: var(--cc-ox-lift); color: #fff4f1; }
.dark .cc-btn-primary:hover { background: var(--cc-ox-lift-hover); }

.cc-btn-neutral {
  background: var(--cc-blank); color: var(--cc-text-3);
  border-color: var(--cc-line);
}
.cc-btn-neutral:hover { border-color: var(--cc-line-2); color: var(--cc-text); }
.cc-btn-ghost-light {
  background: transparent; color: var(--cc-text-2); border-color: var(--cc-line-2);
}
.cc-btn-ghost-light:hover { background: var(--cc-blank); color: var(--cc-text); }
/* accent outline : quieter sibling of the filled primary */
.cc-btn-outline {
  background: transparent; color: var(--cc-ox); border-color: var(--cc-ox);
}
.cc-btn-outline:hover { background: var(--cc-red-soft); border-color: var(--cc-ox-hover); color: var(--cc-ox-hover); }
.cc-btn-outline-white {
  background: transparent; color: var(--cc-on-dark);
  border-color: var(--cc-dark-line-2);
}
.cc-btn-outline-white:hover { background: var(--cc-dark-panel); border-color: var(--cc-on-dark-3); }

/* ---- nav ----------------------------------------------------- */
.cc-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 56px;
}
.cc-wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--cc-sans); font-weight: 700; font-size: 21px;
  letter-spacing: 0.02em; color: var(--cc-text);
}
.cc-wordmark .mark {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1.5px solid currentColor; border-radius: 8px;
}
.cc-navlinks { display: flex; align-items: center; gap: 30px; }
.cc-navlinks a {
  font-size: 15px; font-weight: 500; color: var(--cc-text-3); text-decoration: none;
}
.cc-navlinks a:hover { color: var(--cc-text); }

/* display headline */
.cc-display {
  font-family: var(--cc-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--cc-text);
}
.cc-lede {
  font-family: var(--cc-serif);
  font-weight: 400;
  color: var(--cc-text-2);
  line-height: 1.55;
}
/* large display amber : the headline highlight only */
.cc-mark-amber { color: var(--cc-amber-strong); }
.dark .cc-mark-amber { color: var(--cc-amber-dk); }