/* Hallmark · macrostructure: Ecosystem Index (job-board variant) · hero: full-bleed photo banner, brand-red overlay, clip-path wave edge
 * theme: studied-DNA (source: PT Lenko Surya Perkasa website, client-supplied mockup)
 * paper: #f8fafc (slate-50) · accent: #dc2626 (brand red) · ink: #1f2937 · display + body: Inter (client brand face)
 * axes: light / grotesk-sans / warm (red 27°) · nav: N9 edge-aligned (standalone only) · footer: Ft2 inline
 * Values are taken verbatim from the client's stylesheet so the embedded portal sits seamlessly inside their site.
 */

:root {
  /* ── Surfaces & neutrals (client slate scale) ── */
  --color-paper:        #f8fafc;
  --color-paper-2:      #f1f5f9;
  --color-surface:      #ffffff;
  --color-rule:         #e2e8f0;
  --color-rule-strong:  #8392a7;

  /* ── Ink ── */
  --color-ink:          #1f2937;
  --color-ink-2:        #475569;
  --color-muted:        #64748b;

  /* ── Brand surface (hero panel, selected states) ──
   * Everything brand-coloured derives from --brand-base, which portal.js sets from the company's
   * brand colour (Data master → Perusahaan). Default = Lenko red. */
  --brand-base:             #dc2626;
  --color-brand:            var(--brand-base);
  --color-brand-2:          color-mix(in srgb, var(--brand-base) 84%, black);
  --color-brand-deep:       color-mix(in srgb, var(--brand-base) 58%, black);
  --color-brand-rule:       color-mix(in srgb, var(--brand-base) 82%, white);
  --color-on-brand:         #ffffff;
  --color-on-brand-muted:   #fef2f2;

  /* ── Hero photo overlay (brand → deep brand, translucent over the photo) ── */
  --overlay-hero-start:      color-mix(in srgb, var(--color-brand) 94%, transparent);
  --overlay-hero-end:        color-mix(in srgb, var(--color-brand-deep) 60%, transparent);
  --overlay-hero-end-strong: color-mix(in srgb, var(--color-brand-deep) 80%, transparent);

  /* ── Dark surface (summary card, secondary buttons) ── */
  --color-dark:         #1f2937;
  --color-dark-2:       #334155;
  --color-dark-rule:    #475569;
  --color-on-dark:      #f8fafc;
  --color-on-dark-muted:#cbd5e1;

  /* ── Accent (calls to action, signals) ── */
  --color-accent:       var(--color-brand);
  --color-accent-hover: var(--color-brand-2);
  --color-accent-ink:   #ffffff;
  --color-accent-soft:  color-mix(in srgb, var(--brand-base) 7%, white);
  --color-accent-deep:  var(--color-brand-2);
  --color-focus:        #1f2937;

  /* ── Feedback ── */
  --color-success:      #15803d;
  --color-success-soft: #dcfce7;
  --color-danger:       #b91c1c;
  --color-danger-soft:  #fef2f2;

  /* ── Shadows (after the client's 0 5px 20px / 0 15px 40px pair) ── */
  --shadow-1:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 5px 20px rgba(15, 23, 42, 0.07);
  --shadow-2:
    0 0 0 1px color-mix(in srgb, var(--brand-base) 6%, transparent),
    0 4px 10px rgba(15, 23, 42, 0.05),
    0 15px 40px rgba(15, 23, 42, 0.13);
  --shadow-deck:
    0 2px 6px rgba(69, 10, 10, 0.18),
    0 22px 44px -14px rgba(69, 10, 10, 0.5);
  --shadow-accent:       0 4px 15px color-mix(in srgb, var(--brand-base) 30%, transparent);
  --shadow-accent-hover: 0 6px 20px color-mix(in srgb, var(--brand-base) 40%, transparent);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.05);

  /* ── Type ── */
  --font-display: "Inter", "Segoe UI", ui-sans-serif, sans-serif;
  --font-body:    "Inter", "Segoe UI", ui-sans-serif, sans-serif;

  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.1875rem;
  --text-xl:      clamp(1.5rem, 1.1vw + 1.15rem, 1.875rem);
  --text-display: clamp(2rem, 3.2vw + 1rem, 3.5rem);

  /* ── Space · 4pt scale ── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ── Radius · hierarchy, in the client's 12–20px range ── */
  --radius-panel: 28px;
  --radius-card:  20px;
  --radius-tile:  16px;
  --radius-input: 12px;
  --radius-pill:  999px;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short:   160ms;
  --dur-med:     280ms;
  --dur-long:    700ms;

  /* ── Layers ── */
  --z-raised:  10;
  --z-sticky:  100;
  --z-toast:   400;

  --container: 76rem;
}