/* SolarKal Design Tokens
 * Single source of truth for color, type, space, and surface decisions.
 * Source: 10th Anniversary General Slides Template + brand asset set.
 */

/* The system uses exactly two families, both brand-hosted (below). */

@font-face {
  font-family: "Merriweather";
  src: url("fonts/Merriweather-VariableFont_opsz_wdth_wght.ttf") format("truetype");
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* — Brand color, raw values ——————————————————————————— */
  --sk-yellow: #FBD707;       /* Primary. The sun. Use for emphasis, headlines, KPIs. */
  --sk-yellow-warm: #FFD553;  /* Warm tint, for layered shapes / hover states. */
  --sk-yellow-soft: #FFF6D5;  /* Surface wash — alternating table rows, callouts. */
  --sk-yellow-paper: #FFF2CC; /* Slightly deeper paper for panels on white. */

  --sk-green: #228B22;        /* Confirmation, growth, "go". Highlighted cells. */
  --sk-green-soft: #D9EAD3;   /* Tag/chip surface. */

  --sk-navy: #253846;         /* Deep slate. Dark surfaces, secondary headlines. */
  --sk-teal: #0097A7;         /* Data accent — rare, used for the second series in charts. */

  --sk-ink: #0B0B0B;          /* Primary text. Near-black, never pure. */
  --sk-ink-2: #2A2A2A;        /* Body. */
  --sk-ink-3: #5A5A5A;        /* Secondary/captions. */
  --sk-ink-4: #8E8E8E;        /* Tertiary, disabled. */
  --sk-rule: #E4E4E1;         /* Hairlines, dividers. */
  --sk-rule-2: #C9C9C5;       /* Heavier rule. */

  --sk-paper: #FFFFFF;        /* Default surface. */
  --sk-paper-warm: #FBF8F1;   /* Editorial off-white. Use when 100% white feels clinical. */
  --sk-paper-deep: #F4F1E8;   /* Deeper warm paper for layered panels. */

  --sk-shadow-1: 0 1px 2px rgba(11,11,11,.04), 0 1px 1px rgba(11,11,11,.03);
  --sk-shadow-2: 0 4px 14px rgba(11,11,11,.06), 0 1px 2px rgba(11,11,11,.04);
  --sk-shadow-3: 0 18px 40px rgba(11,11,11,.12), 0 2px 6px rgba(11,11,11,.06);

  /* — Semantic aliases ————————————————————————————————— */
  --sk-bg:        var(--sk-paper);
  --sk-bg-warm:   var(--sk-paper-warm);
  --sk-bg-dark:   var(--sk-navy);
  --sk-fg:        var(--sk-ink);
  --sk-fg-muted:  var(--sk-ink-3);
  --sk-accent:    var(--sk-yellow);
  --sk-emphasis:  var(--sk-green);

  /* — Type ——————————————————————————————————————————— */
  --sk-serif:  "Merriweather", "Source Serif Pro", Georgia, serif;
  --sk-sans:   "Plus Jakarta Sans", "Inter", -apple-system, system-ui, sans-serif;
  /* "Mono" is not a third family — it is a tabular, tracked treatment of the
     sans, used for figures, IDs, captions and metadata. */
  --sk-mono:   "Plus Jakarta Sans", "Inter", -apple-system, system-ui, sans-serif;

  /* The wordmark uses a high-contrast didone serif. For HTML we approximate
     with Merriweather Black at tight tracking; for slide & print, the original
     wordmark PNG is preferred. */

  /* Modular scale (1.250 — Major Third). Comfortable for both editorial and UI. */
  --sk-fs-xs:  0.75rem;   /* 12 */
  --sk-fs-sm:  0.875rem;  /* 14 */
  --sk-fs-md:  1rem;      /* 16 */
  --sk-fs-lg:  1.25rem;   /* 20 */
  --sk-fs-xl:  1.5625rem; /* 25 */
  --sk-fs-2xl: 1.953rem;  /* 31 */
  --sk-fs-3xl: 2.441rem;  /* 39 */
  --sk-fs-4xl: 3.052rem;  /* 49 */
  --sk-fs-5xl: 3.815rem;  /* 61 */
  --sk-fs-6xl: 4.768rem;  /* 76 */

  /* — Space (8pt grid with a 4pt half-step) ————————————— */
  --sk-sp-0:  0;
  --sk-sp-1:  4px;
  --sk-sp-2:  8px;
  --sk-sp-3:  12px;
  --sk-sp-4:  16px;
  --sk-sp-5:  24px;
  --sk-sp-6:  32px;
  --sk-sp-7:  48px;
  --sk-sp-8:  64px;
  --sk-sp-9:  96px;
  --sk-sp-10: 128px;

  /* — Radius ———————————————————————————————————————— */
  --sk-r-0: 0;        /* Default. We default to rectangular. Sun is the circle. */
  --sk-r-1: 2px;
  --sk-r-2: 4px;
  --sk-r-3: 8px;
  --sk-r-pill: 999px;

  /* — Geometry ————————————————————————————————————— */
  --sk-stroke: 1.5px;     /* Default rule weight for "panel outline" shapes. */
  --sk-stroke-heavy: 3px;
}

/* Base resets (only applied where this file is included into a card / app) */
.sk-reset, .sk-reset * { box-sizing: border-box; }
.sk-reset {
  font-family: var(--sk-sans);
  color: var(--sk-fg);
  background: var(--sk-bg);
  font-size: var(--sk-fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display type — Merriweather, tight, high-contrast for the SolarKal feel. */
.sk-display {
  font-family: var(--sk-serif);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--sk-ink);
}
.sk-headline {
  font-family: var(--sk-serif);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.sk-eyebrow {
  font-family: var(--sk-sans);
  font-weight: 700;
  font-size: var(--sk-fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sk-ink-3);
}
.sk-body {
  font-family: var(--sk-sans);
  font-weight: 400;
  font-size: var(--sk-fs-md);
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--sk-ink-2);
}
.sk-mono {
  font-family: var(--sk-mono);
  font-size: var(--sk-fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Recurring brand shapes */
.sk-sun {
  display: inline-block;
  width: 1em; height: 1em;
  background: var(--sk-yellow);
  border-radius: 50%;
}
.sk-panel {
  display: inline-block;
  width: 1em; height: 1em;
  border: var(--sk-stroke) solid var(--sk-ink);
  background: transparent;
}