/* =============================================================
   Peken Banyumasan — Unified Color & Type Tokens
   v2.0 — includes company-profile tokens (dark-mode) +
   dashboard-adapted tokens (light-mode, sage-derived).

   Usage:
     Company Profile  → use --cp-* or the original dark tokens
     Dashboard / Gate → use --dash-* tokens
   ============================================================= */

/* ── Webfonts ─────────────────────────────────────────────── */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400&display=swap');

@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ══════════════════════════════════════════════════════════
     BRAND PRIMITIVES — shared across all products
     Raw pigments. Never use directly; go through semantic vars.
     ══════════════════════════════════════════════════════════ */

  /* Sage family */
  --peken-sage:         #C3CA96;   /* primary brand accent */
  --peken-sage-light:   #dde3c0;   /* lightened +20% for light-bg tints */
  --peken-sage-pale:    #f0f2e4;   /* very pale sage — dashboard bg */
  --peken-sage-mid:     #a8b07a;   /* mid sage — hover on light bg */
  --peken-sage-dark:    #7a8a52;   /* dark sage — text/buttons on white */
  --peken-sage-deeper:  #4f5c30;   /* deeper sage — headings/active */

  /* Ink family (company profile dark bg) */
  --peken-ink:          #0D0D0D;
  --peken-charcoal:     #1B1B1B;
  --peken-carbon:       #111111;
  --peken-coal:         #1A1B1A;

  /* Neutrals */
  --peken-white:        #FFFFFF;
  --peken-mist:         #B2B2B2;
  --peken-smoke:        #5B5B5B;

  /* Status primitives (muted, harmonised with sage) */
  --peken-status-green:   #7A9B6A;  /* muted olive-green success */
  --peken-status-red:     #B87272;  /* muted terracotta error */
  --peken-status-amber:   #C4A24D;  /* muted golden warning */
  --peken-status-blue:    #6B8FA3;  /* muted slate-blue info */
  --peken-status-indigo:  #7A80B0;  /* muted indigo — exit/out */

  /* ══════════════════════════════════════════════════════════
     COMPANY PROFILE (dark-mode, as-designed)
     ══════════════════════════════════════════════════════════ */
  --cp-bg-page:       var(--peken-charcoal);
  --cp-bg-elevated:   var(--peken-carbon);
  --cp-bg-deep:       var(--peken-ink);
  --cp-bg-inverse:    var(--peken-sage);
  --cp-fg-primary:    var(--peken-white);
  --cp-fg-secondary:  var(--peken-mist);
  --cp-fg-muted:      var(--peken-smoke);
  --cp-fg-on-sage:    var(--peken-ink);
  --cp-accent:        var(--peken-sage);
  --cp-gradient-sage-up: linear-gradient(
    rgba(195,202,150,0) 0%, rgba(195,202,150,.52) 25%,
    rgba(195,202,150,.66) 36%, rgba(195,202,150,.84) 58%,
    #C3CA96 94%);
  --cp-gradient-ink-down: linear-gradient(
    rgba(13,13,13,0) 0%, rgba(13,13,13,.23) 12%,
    rgba(13,13,13,.88) 41%, #0D0D0D 64%);

  /* ══════════════════════════════════════════════════════════
     DASHBOARD (light-mode, sage-derived)
     Backgrounds are pale sage tints. Sidebar stays charcoal.
     Interactive green = dark sage, not the Tailwind green-700.
     ══════════════════════════════════════════════════════════ */

  /* Surfaces */
  --dash-bg:              #f2f4e8;   /* page bg — very pale sage */
  --dash-surface:         #FFFFFF;   /* cards, panels */
  --dash-surface-hover:   #f7f8f2;   /* row hover */
  --dash-border:          #e4e7d4;   /* card/divider border — sage tint */
  --dash-border-strong:   #c8ccb0;   /* stronger borders */

  /* Sidebar (stays dark — matches company profile identity) */
  --dash-sidebar-bg:      var(--peken-charcoal);   /* #1B1B1B */
  --dash-sidebar-fg:      #d0d4b8;                 /* muted sage-white */
  --dash-sidebar-active:  rgba(195,202,150,0.15);  /* sage tint on active */
  --dash-sidebar-active-fg: var(--peken-sage);

  /* Primary action (darker sage, readable on white) */
  --dash-accent:          var(--peken-sage);        /* #C3CA96 — highlights, badges */
  --dash-accent-dark:     var(--peken-sage-dark);   /* #7A8A52 — buttons, links */
  --dash-accent-deeper:   var(--peken-sage-deeper); /* #4F5C30 — hover state */
  --dash-accent-bg:       #eef0e0;                  /* sage bg tint */
  --dash-accent-border:   #c8d09a;                  /* sage border */

  /* Text */
  --dash-text-primary:    #1e2010;   /* near-black with sage undertone */
  --dash-text-secondary:  #5a6040;   /* muted olive for secondary labels */
  --dash-text-muted:      #8a9070;   /* placeholder / disabled */
  --dash-text-inverse:    var(--peken-white);

  /* Status — all muted, harmonised with sage */
  --dash-success:         var(--peken-status-green);   /* #7A9B6A */
  --dash-success-bg:      #eef4eb;
  --dash-success-border:  #b8d4b0;
  --dash-error:           var(--peken-status-red);     /* #B87272 */
  --dash-error-bg:        #f7eeee;
  --dash-error-border:    #dbb8b8;
  --dash-warning:         var(--peken-status-amber);   /* #C4A24D */
  --dash-warning-bg:      #f7f2e4;
  --dash-warning-border:  #dcc882;
  --dash-info:            var(--peken-status-blue);    /* #6B8FA3 */
  --dash-info-bg:         #eaf0f4;
  --dash-info-border:     #b0c8d8;
  --dash-exit:            var(--peken-status-indigo);  /* #7A80B0 — keluar/exit */
  --dash-exit-bg:         #eeeef8;
  --dash-exit-border:     #b8badc;

  /* ══════════════════════════════════════════════════════════
     TYPOGRAPHY — shared across all products
     ══════════════════════════════════════════════════════════ */
  --font-display:  "Clash Display", system-ui, sans-serif;
  --font-body:     "Montserrat", system-ui, sans-serif;
  --font-italic:   "Playfair Display", Georgia, serif;

  /* Scale */
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-96: 96px;

  /* Line heights */
  --lh-tight:   1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;
  --lh-loose:   1.8;

  /* Letter spacing */
  --ls-normal: 0;
  --ls-label:  0.02em;
  --ls-wide:   0.06em;

  /* ══════════════════════════════════════════════════════════
     SPACING
     ══════════════════════════════════════════════════════════ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 120px;

  /* ══════════════════════════════════════════════════════════
     CORNERS
     Company profile: zero radius everywhere.
     Dashboard: rounded cards (12-16px) for softer feel.
     ══════════════════════════════════════════════════════════ */
  --r-0:   0px;    /* company profile default */
  --r-sm:  5px;
  --r-md:  12px;   /* dashboard cards */
  --r-lg:  16px;   /* dashboard large cards */
  --r-xl:  20px;   /* dashboard pill/button */
  --r-full: 9999px;

  /* ══════════════════════════════════════════════════════════
     SHADOW (dashboard only — company profile uses no shadow)
     ══════════════════════════════════════════════════════════ */
  --shadow-sm:  0 1px 3px rgba(30,32,16,.06), 0 1px 2px rgba(30,32,16,.04);
  --shadow-md:  0 4px 12px rgba(30,32,16,.08), 0 2px 4px rgba(30,32,16,.04);
  --shadow-lg:  0 8px 24px rgba(30,32,16,.10), 0 4px 8px rgba(30,32,16,.06);
  --shadow-accent: 0 4px 14px rgba(122,138,82,.25); /* sage-tinted glow */

  /* ══════════════════════════════════════════════════════════
     MOTION
     ══════════════════════════════════════════════════════════ */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  180ms;
  --dur-base:  320ms;
  --dur-slow:  560ms;
}

/* ── Base reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; }

/* Company profile base */
.cp-root {
  background: var(--cp-bg-page);
  color: var(--cp-fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* Dashboard base */
.dash-root {
  background: var(--dash-bg);
  color: var(--dash-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* ── Semantic type classes (shared) ─────────────────────── */
.type-display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-32);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
}
.type-display-md {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: var(--lh-tight);
}
.type-label-lg {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
}
.type-label-sm {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}
.type-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}
.type-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
}
.type-caption {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--fs-14);
}
.type-eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* ── Dashboard-specific type classes ───────────────────── */
.dash-page-title {
  /* Page-level H1 — Montserrat 700, 22px */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-20);        /* 20px — not larger */
  color: var(--dash-text-primary);
  line-height: var(--lh-snug);
}
.dash-section-title {
  /* Card / section header — Montserrat 600, 15px */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-14);
  color: var(--dash-text-primary);
}
.dash-label {
  /* Form label / table header — Montserrat 600, 12px */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-12);
  color: var(--dash-text-secondary);
}
.dash-caption {
  /* Micro-label, eyebrow — Montserrat 500, 10px */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-10);
  color: var(--dash-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.dash-stat-value {
  /* KPI number — Montserrat 700, 28px */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 28px;
  color: var(--dash-text-primary);
  line-height: var(--lh-tight);
}

/* ── Dashboard font-weight guide (for Claude Code) ──────────
   700  →  stat numbers, page titles, table-cell primary text
   600  →  card headings, section labels, button text, badge text
   500  →  nav items, secondary labels, sidebar items
   400  →  body copy, table secondary text, placeholder text
   ────────────────────────────────────────────────────────── */

/* ── Dashboard component classes ───────────────────────── */
.dash-card {
  background: var(--dash-surface);
  border: 1px solid var(--dash-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.dash-btn-primary {
  background: var(--dash-accent-dark);
  color: var(--peken-white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-14);
  border: none;
  border-radius: var(--r-xl);
  padding: 10px 20px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.dash-btn-primary:hover {
  background: var(--dash-accent-deeper);
  box-shadow: var(--shadow-accent);
}
.dash-btn-ghost {
  background: transparent;
  color: var(--dash-accent-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-14);
  border: 1.5px solid var(--dash-accent-border);
  border-radius: var(--r-xl);
  padding: 9px 20px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.dash-btn-ghost:hover { background: var(--dash-accent-bg); }