/* ================================================================
   HeyApril Design System — CSS tokens + semantic type
   Source of truth: Figma "HeyApril Design System - CC extraction"
   ================================================================ */

/* --- Fonts ------------------------------------------------------ */
/* Geist + W95FA: brand fonts — served from local /fonts. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/GeistSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/GeistSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/GeistSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "W95FA";
  src: url("../fonts/W95FA.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ====== BRAND — primary palette ====== */
  --brand-piccolo:        #0D787A;   /* primary teal */
  --brand-piccolo-dark:   #334B47;   /* deep teal, also primary text */
  --brand-piccolo-mid:    #2F6364;   /* retro button border tone */
  --brand-jiren:          #CEFFF9;   /* mint — face of retro btn */
  --brand-jiren-soft:     #CDF9F4;   /* primary-alt */
  --brand-jiren-light:    #EBFFFD;   /* primary-light */
  --brand-jiren-subtle:   #F4FBF8;   /* app surface */

  /* ====== BRAND — accents ====== */
  --brand-hit:            #FF8A65;   /* coral, urgent/error */
  --brand-hit-dark:       #E57A55;
  --brand-zeno:           #FFE086;   /* sand, pending/AI */
  --brand-zeno-dark:      #D4B85C;
  --brand-secondary:      #F78F27;   /* secondary (Cover swatches) */
  --brand-secondary-alt:  #EA8F86;
  --brand-secondary-dark: #7A525B;
  --brand-tertiary:       #00509D;
  --brand-tertiary-dark:  #072745;

  /* ====== NEUTRALS (Dragon-Ball names from Token-Reference) ====== */
  --trunks:               #64748B;   /* body text / secondary */
  --trunks-light:         #94A3B8;   /* muted */
  --goku:                 #E2E8F0;   /* borders */
  --gohan:                #FFFFFF;   /* card surface */
  --heles:                #F1F5F9;   /* page bg (cool) */
  --bulma:                #0F172B;   /* near-black text */
  --off-white:            #FDFDF8;   /* warm app bg */

  /* ====== SEMANTIC — score bands ====== */
  --score-excellent:      #047857;
  --score-excellent-bg:   #EBFEF5;
  --score-good:           #0D787A;
  --score-good-bg:        #F0FDFA;
  --score-fair:           #B45309;
  --score-fair-bg:        #FFFBEB;
  --score-attention:      #BF1616;
  --score-attention-bg:   #FEF2F2;

  /* ====== SEMANTIC aliases (preferred over raw brand refs) ====== */
  --fg-1:      var(--bulma);          /* primary text */
  --fg-2:      var(--trunks);         /* body/secondary */
  --fg-3:      var(--trunks-light);   /* muted / captions */
  --fg-on-primary: var(--brand-piccolo-dark); /* text on jiren btn */

  --bg-canvas: var(--off-white);
  --bg-surface:var(--gohan);
  --bg-muted:  var(--brand-jiren-subtle);

  --border-default: var(--goku);
  --border-strong:  var(--trunks-light);
  --border-retro:   var(--brand-piccolo-mid);

  --action-primary:        var(--brand-piccolo);
  --action-primary-face:   var(--brand-jiren);
  --action-primary-border: var(--brand-piccolo-mid);
  --action-primary-text:   var(--brand-piccolo-dark);

  /* ====== TYPE ====== */
  --font-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel: "W95FA", "VT323", monospace;
  --font-mono:  "Source Code Pro", ui-monospace, Menlo, monospace;

  /* Scale (px) */
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px;
  --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px;
  --fs-40: 40px; --fs-56: 56px;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug:  1.2;
  --lh-base:  1.5;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* ====== SPACING (4px grid) ====== */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;
  --sp-4:  16px;  --sp-5:  20px;  --sp-6:  24px;
  --sp-8:  32px;  --sp-10: 40px;  --sp-12: 48px;

  /* ====== RADIUS ====== */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;
  --r-retro: 10px 10px 9px 9px; /* asymmetric — the button */

  /* ====== SHADOWS ====== */
  --shadow-card:        2px 2px 0 0 rgb(0 0 0);               /* flat offset */
  --shadow-retro:       2px 2px 0 0 rgb(0 0 0);               /* button */
  --shadow-tab-active:  0 1px 2px 0 rgba(16,24,40,0.08),
                        0 1px 3px 0 rgba(16,24,40,0.03);
  --shadow-elevated:    0 8px 24px -6px rgba(16,24,40,0.18),
                        0 2px 4px -1px rgba(16,24,40,0.06);

  /* ====== MOTION ====== */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
}

/* --- Body-level default ----------------------------------------- */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ================================================================
   SEMANTIC TYPE CLASSES
   (h1..h4 track Figma Typography Token page: Regular vs Bold rails)
   ================================================================ */

.h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-56); font-weight: var(--fw-bold);
  line-height: var(--lh-snug); letter-spacing: -0.01em;
  color: var(--brand-piccolo-dark);
}
.h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-40); font-weight: var(--fw-bold);
  line-height: var(--lh-snug); letter-spacing: -0.005em;
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-32); font-weight: var(--fw-semibold);
  line-height: 1.2; color: var(--fg-1);
}
.h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-24); font-weight: var(--fw-semibold);
  line-height: 1.3; color: var(--fg-1);
}
.h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-20); font-weight: var(--fw-semibold);
  line-height: 1.3; color: var(--fg-1);
}

.body-lg   { font-size: var(--fs-18); line-height: 1.55; color: var(--fg-1); }
.body-base { font-size: var(--fs-16); line-height: 1.55; color: var(--fg-1); }
.body-sm   { font-size: var(--fs-14); line-height: 1.5;  color: var(--fg-2); }
.body-xs   { font-size: var(--fs-12); line-height: 1.5;  color: var(--fg-2); }

.eyebrow {
  font-family: var(--font-pixel);
  font-size: var(--fs-14);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-piccolo);
}

.pixel-wordmark {
  font-family: var(--font-pixel);
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--brand-piccolo-dark);
}

code, .mono { font-family: var(--font-mono); font-size: .92em; }

/* ================================================================
   COMPONENT PRIMITIVES
   ================================================================ */

/* Retro 3D primary button — signature */
.btn-retro {
  --btn-top: 0px;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 10px 16px 12px 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-16); font-weight: var(--fw-bold);
  color: var(--action-primary-text);
  background: var(--action-primary-face);
  border: 1px solid var(--action-primary-border);
  border-radius: var(--r-retro);
  box-shadow: var(--shadow-retro);
  cursor: pointer;
  transform: translateY(var(--btn-top));
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}
.btn-retro:hover { border-color: var(--brand-piccolo-dark); }
.btn-retro:focus-visible {
  outline: 2px solid var(--brand-piccolo);
  outline-offset: 3px;
}
.btn-retro:active,
.btn-retro.is-pressed {
  --btn-top: 2px;
  box-shadow: 0 0 0 0 rgb(0 0 0);
}
.btn-retro[disabled] { opacity: .5; cursor: not-allowed; }

/* Secondary (ghost on dark teal border) */
.btn-secondary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 9px 14px;
  font-weight: var(--fw-semibold); font-size: var(--fs-14);
  color: var(--brand-piccolo-dark);
  background: transparent;
  border: 1px solid var(--brand-piccolo-dark);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.btn-secondary:hover { background: var(--brand-jiren-subtle); }

/* Text button */
.btn-text {
  font-weight: var(--fw-semibold); font-size: var(--fs-14);
  color: var(--brand-piccolo);
  background: none; border: 0; padding: 6px 8px; cursor: pointer;
}
.btn-text:hover { text-decoration: underline; }

/* Card */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card:hover { border-color: var(--border-strong); }
.card > .card-header {
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--border-default);
  font-weight: var(--fw-semibold); color: var(--fg-1);
}
.card > .card-body { padding: 16px 24px 24px; color: var(--fg-2); }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  border-radius: var(--r-full);
  background: var(--score-good-bg);
  color: var(--score-good);
  border: 1px solid transparent;
}
.badge--good       { background: var(--score-good-bg);      color: var(--score-good); }
.badge--fair       { background: var(--score-fair-bg);      color: var(--score-fair); }
.badge--attention  { background: var(--score-attention-bg); color: var(--score-attention); }
.badge--neutral    { background: var(--heles);              color: var(--trunks); }
.badge--primary    { background: var(--brand-jiren-light);  color: var(--brand-piccolo-dark); }

/* Status dot */
.dot { width: 8px; height: 8px; border-radius: var(--r-full); display:inline-block; }
.dot--active   { background: var(--brand-piccolo); }
.dot--pending  { background: var(--brand-zeno); }
.dot--urgent   { background: var(--brand-hit); }
.dot--inactive { background: var(--goku); }

/* Pill tab */
.pill-tabs {
  display: inline-flex; gap: 4px;
  background: var(--heles);
  padding: 4px; border-radius: var(--r-full);
}
.pill-tab {
  padding: 8px 14px;
  font-size: var(--fs-14); font-weight: var(--fw-semibold);
  color: var(--trunks);
  border: 0; background: transparent;
  border-radius: var(--r-full);
  cursor: pointer;
}
.pill-tab[aria-selected="true"] {
  background: var(--gohan);
  color: var(--fg-1);
  box-shadow: var(--shadow-tab-active);
}

/* Input */
.input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-sans); font-size: var(--fs-14);
  color: var(--fg-1);
  background: var(--gohan);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease);
}
.input:focus {
  outline: none;
  border-color: var(--brand-piccolo);
  box-shadow: 0 0 0 3px rgba(13,120,122,0.12);
}

/* Divider */
.divider { height: 1px; background: var(--border-default); border: 0; }