/* ==========================================================================
   Dealdrum Design Tokens
   Source of truth: README.md + repo DESIGN.md
   Calm, premium deal-control room for verified Ghana funding opportunities.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Open+Sans:wght@400;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");

:root {
  /* ------------------------------------------------------------------ Brand */
  --primary:        #6959fa;
  --primary-hover:  #5a4af0;
  --primary-press:  #4d3edb;
  --primary-pale:   #ece9ff;     /* faint primary tint for hover bg / badges */
  --primary-soft:   #d9d4ff;     /* pale lavender used inside the logo mark */

  --gold:           #C99700;     /* premium accent — use sparingly */
  --gold-pale:      #fbf3dd;

  /* --------------------------------------------------------------- Neutrals */
  --charcoal:       #111827;     /* primary text */
  --ink-2:          #2d3748;     /* secondary text */
  --ink-3:          #4a5568;     /* tertiary text / icon stroke */
  --ink-4:          #6b7280;     /* muted body */
  --ink-5:          #9ca3af;     /* placeholder, hint */

  --bg:             #F8FAF7;     /* app background */
  --panel:          #FFFFFF;     /* card / panel surface */
  --panel-2:        #fbfbfa;     /* subtle alt panel */

  --border:         #D8DED6;     /* dividers, inputs, table lines */
  --border-strong:  #c2c8c0;
  --border-soft:    #ececec;     /* very faint internal divider */

  /* -------------------------------------------------------- Semantic colors */
  --success:        #15803D;     /* Verified */
  --success-bg:     #e6f4ec;
  --warning:        #B7791F;     /* Needs More Proof */
  --warning-bg:     #fbf2db;
  --danger:         #B91C1C;     /* Rejected */
  --danger-bg:      #fbe7e7;
  --info:           #2563EB;     /* Draft */
  --info-bg:        #e3edfd;

  /* ----------------------------------------------------------------- Shadow */
  --shadow-1:  0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-2:  0 2px 6px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17,24,39,0.04);
  --shadow-3:  0 8px 24px rgba(17, 24, 39, 0.10), 0 2px 4px rgba(17,24,39,0.05);
  --shadow-modal: 0 24px 48px rgba(17, 24, 39, 0.18), 0 4px 12px rgba(17,24,39,0.08);
  --ring-primary: 0 0 0 3px rgba(105, 89, 250, 0.18);

  /* ----------------------------------------------------------------- Radius */
  --radius-xs:   4px;   /* small controls */
  --radius-sm:   6px;   /* inputs, buttons */
  --radius-md:   8px;   /* cards, panels — MAX for surfaces */
  --radius-pill: 999px; /* tiny status indicators only */

  /* ---------------------------------------------------------------- Spacing */
  --s-2xs:  2px;
  --s-xs:   4px;
  --s-sm:   8px;
  --s-md:  16px;
  --s-lg:  24px;
  --s-xl:  32px;
  --s-2xl: 48px;
  --s-3xl: 64px;

  /* ------------------------------------------------------------------ Layout */
  --content-max: 1440px;
  --sidebar-w:    240px;

  /* ---------------------------------------------------------------- Type */
  --font-display: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui:      "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale: size / line-height */
  --t-display:  40px; --lh-display:  48px;
  --t-h1:       32px; --lh-h1:       40px;
  --t-h2:       24px; --lh-h2:       32px;
  --t-h3:       18px; --lh-h3:       28px;
  --t-body:     15px; --lh-body:     24px;
  --t-small:    13px; --lh-small:    20px;
  --t-tiny:     12px; --lh-tiny:     16px;

  /* ------------------------------------------------------------------ Motion */
  --dur-micro:  80ms;
  --dur-short:  180ms;
  --dur-medium: 260ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out */
  --ease-exit:  cubic-bezier(0.4, 0, 1, 1);      /* ease-in  */
  --ease-move:  cubic-bezier(0.4, 0, 0.2, 1);    /* ease-in-out */
}

/* ============================================================== Semantic API
   Higher-level vars that map onto the base tokens above. Use these in UI code.
   ========================================================================== */

:root {
  --fg-1: var(--charcoal);
  --fg-2: var(--ink-3);
  --fg-3: var(--ink-4);
  --fg-mute: var(--ink-5);
  --fg-on-primary: #ffffff;

  --surface-app:   var(--bg);
  --surface-panel: var(--panel);
  --surface-alt:   var(--panel-2);

  --link: var(--primary);
}

/* =============================================================== Base reset */

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ================================================================ Typography
   Class-based API — use h1, h2, etc. Native tags inherit too. */

h1, .h1, .display, .h2, h2, .h3, h3 { font-family: var(--font-display); margin: 0; color: var(--fg-1); letter-spacing: 0; }

.display, h1.display { font-size: var(--t-display); line-height: var(--lh-display); font-weight: 700; }
h1, .h1 { font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: 700; }
h2, .h2 { font-size: var(--t-h2); line-height: var(--lh-h2); font-weight: 700; }
h3, .h3 { font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: 600; }

p, .p { font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0; }
.small { font-size: var(--t-small); line-height: var(--lh-small); }
.tiny  { font-size: var(--t-tiny);  line-height: var(--lh-tiny); letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg-3); }

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

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* =================================================================== Badges */

.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--t-tiny); line-height: 1; font-weight: 600; padding: 5px 8px; border-radius: var(--radius-xs); border: 1px solid transparent; white-space: nowrap; }
.badge--draft    { color: var(--info);    background: var(--info-bg);    border-color: #cfdcfa; }
.badge--needs    { color: var(--warning); background: var(--warning-bg); border-color: #ecd9a3; }
.badge--verified { color: var(--success); background: var(--success-bg); border-color: #b7dcc4; }
.badge--rejected { color: var(--danger);  background: var(--danger-bg);  border-color: #f0c0c0; }
.badge--gold     { color: var(--gold);    background: var(--gold-pale);  border-color: #ecd58e; }

/* ================================================================== Buttons */

.btn { font-family: var(--font-ui); font-size: var(--t-body); font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel); color: var(--fg-1); cursor: pointer; transition: background var(--dur-short) var(--ease-move), border-color var(--dur-short) var(--ease-move), transform var(--dur-micro) var(--ease-move); }
.btn:hover { background: #f3f4f1; }
.btn:active { transform: scale(.985); }

.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--fg-on-primary); }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn--primary:active { background: var(--primary-press); }

.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--primary-pale); }

.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }

/* =================================================================== Cards */

.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }

/* =================================================================== Inputs */

.input, input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea {
  font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--lh-body);
  width: 100%; padding: 10px 12px; box-sizing: border-box;
  background: var(--panel); color: var(--fg-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--dur-short) var(--ease-move), box-shadow var(--dur-short) var(--ease-move);
}
.input:focus, input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: var(--ring-primary); }
::placeholder { color: var(--fg-mute); }

label.field-label, .label { display: block; font-size: var(--t-small); font-weight: 600; color: var(--fg-2); margin-bottom: 6px; }

/* =================================================================== Logo */

.dealdrum-logo-mark {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--primary);
  position: relative;
  flex-shrink: 0;
}
.dealdrum-logo-mark::before {
  /* white scoop / drum silhouette */
  content: "";
  position: absolute; inset: 22% 35% 18% 22%;
  background: #fff;
  border-radius: 50% 50% 50% 14% / 60% 60% 40% 40%;
}
.dealdrum-logo-mark::after {
  /* lavender accent square */
  content: "";
  position: absolute; top: 18%; right: 18%;
  width: 28%; height: 28%;
  background: var(--primary-soft);
  border-radius: 2px;
}