/* =============================================================
   SevenC — Design Tokens (7CTheme)
   Core tokens for the SevenC brand system. Roboto everywhere
   (Roboto 900 for display/stats). Light is the default surface;
   add .sc-on-dark or [data-sc-theme="dark"] to a wrapper to flip.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  /* ---- Brand palette -------------------------------------- */
  --sc-ink:          #0B150E;  /* off-black — primary dark bg */
  --sc-ink-2:        #11211A;  /* raised surface on dark */
  --sc-ink-3:        #1A2E22;  /* card surface on dark */

  --sc-lime:         #C1CF34;  /* primary accent (bright — use on dark) */
  --sc-lime-dark:    #7A8C20;  /* accent on light surfaces */
  --sc-lime-soft:    #E6EC9A;  /* tints / highlights */

  --sc-orange:       #E25A29;  /* warning / callout accent */
  --sc-orange-soft:  #F6C6B4;

  --sc-purple:       #7880B5;  /* tertiary accent */
  --sc-purple-soft:  #C4C8E0;

  --sc-cream:        #F5F5F3;  /* primary light bg */
  --sc-cream-2:      #EDEDE9;  /* darker cream surface */
  --sc-white:        #FFFFFF;

  --sc-text-dark-1:  #1E1E1E;  /* body on cream */
  --sc-text-dark-2:  #3A3A3A;  /* secondary body on cream */
  --sc-text-muted:   #8A8A8A;  /* grey — labels */
  --sc-text-light-1: #F5F5F3;  /* body on ink */
  --sc-text-light-2: #C8C8C8;  /* secondary body on ink */
  --sc-text-light-3: #8A8A8A;  /* tertiary on ink */

  --sc-divider-dark:  rgba(245,245,243,0.10);
  --sc-divider-light: rgba(11,21,14,0.10);

  /* ---- Semantic (default: LIGHT surface) ------------------ */
  --sc-bg:           var(--sc-cream);
  --sc-bg-raised:    #FFFFFF;
  --sc-fg:           var(--sc-text-dark-1);
  --sc-fg-2:         var(--sc-text-dark-2);
  --sc-fg-muted:     var(--sc-text-muted);
  --sc-accent:       var(--sc-lime-dark);   /* dark-lime reads on light */
  --sc-accent-ink:   var(--sc-ink);
  --sc-divider:      var(--sc-divider-light);
  --sc-track:        rgba(11,21,14,0.07);

  /* Status */
  --sc-success:      #7A8C20;
  --sc-success-up:   var(--sc-lime);
  --sc-danger:       var(--sc-orange);
  --sc-warn:         #B5791F;
  --sc-info:         var(--sc-purple);

  /* ---- Typography (Roboto everywhere) -------------------- */
  --sc-font-sans:    'Roboto', Arial, 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --sc-font-display: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif; /* weight 900 */
  --sc-font-mono:    'Roboto Mono', ui-monospace, Menlo, monospace;

  /* Type scale — compact, information-dense */
  --sc-fs-xs: 11px; --sc-fs-sm: 13px; --sc-fs-base: 14px; --sc-fs-md: 16px;
  --sc-fs-lg: 18px; --sc-fs-xl: 22px; --sc-fs-2xl: 28px; --sc-fs-3xl: 36px;
  --sc-fs-4xl: 48px; --sc-fs-5xl: 64px; --sc-fs-6xl: 88px; --sc-fs-7xl: 120px;

  --sc-lh-tight: 1.1; --sc-lh-snug: 1.25; --sc-lh-normal: 1.45; --sc-lh-body: 1.55;
  --sc-ls-wide: 0.08em;   /* eyebrows, caps */
  --sc-ls-wider: 0.12em;  /* tagline */
  --sc-ls-tight: -0.02em; /* display */

  /* ---- Radii / Shadows ----------------------------------- */
  --sc-radius-xs: 2px; --sc-radius-sm: 4px; --sc-radius-md: 6px;
  --sc-radius-lg: 10px; --sc-radius-xl: 16px; --sc-radius-pill: 999px;
  --sc-shadow-sm: 0 1px 2px rgba(11,21,14,0.06);
  --sc-shadow-md: 0 4px 14px rgba(11,21,14,0.08);
  --sc-shadow-lg: 0 12px 32px rgba(11,21,14,0.14);
}

/* Dark surface — apply to a wrapper to flip semantics */
.sc-on-dark,
[data-sc-theme="dark"] {
  --sc-bg:        var(--sc-ink);
  --sc-bg-raised: var(--sc-ink-2);
  --sc-fg:        var(--sc-text-light-1);
  --sc-fg-2:      var(--sc-text-light-2);
  --sc-fg-muted:  var(--sc-text-light-3);
  --sc-accent:    var(--sc-lime);   /* bright lime on dark */
  --sc-accent-ink: var(--sc-ink);
  --sc-divider:   var(--sc-divider-dark);
  --sc-track:     rgba(245,245,243,0.08);
}

/* ----- Semantic text elements ----- */
.sc-display { font-family: var(--sc-font-display); font-weight: 900; font-size: var(--sc-fs-5xl); line-height: var(--sc-lh-tight); letter-spacing: var(--sc-ls-tight); color: var(--sc-fg); }
.sc-stat    { font-family: var(--sc-font-display); font-weight: 900; font-size: var(--sc-fs-6xl); line-height: .95; letter-spacing: -0.02em; color: var(--sc-fg); }
.sc-h1 { font-family: var(--sc-font-sans); font-weight: 900; font-size: var(--sc-fs-3xl); line-height: var(--sc-lh-snug); letter-spacing: var(--sc-ls-tight); color: var(--sc-fg); }
.sc-h2 { font-family: var(--sc-font-sans); font-weight: 900; font-size: var(--sc-fs-2xl); line-height: var(--sc-lh-snug); color: var(--sc-fg); }
.sc-h3 { font-family: var(--sc-font-sans); font-weight: 700; font-size: var(--sc-fs-xl); line-height: var(--sc-lh-snug); color: var(--sc-fg); }
.sc-eyebrow { font-family: var(--sc-font-sans); font-weight: 700; font-size: var(--sc-fs-xs); letter-spacing: var(--sc-ls-wide); text-transform: uppercase; color: var(--sc-fg-muted); }
.sc-body { font-family: var(--sc-font-sans); font-weight: 400; font-size: var(--sc-fs-base); line-height: var(--sc-lh-body); color: var(--sc-fg); }
.sc-caption { font-family: var(--sc-font-sans); font-weight: 400; font-size: var(--sc-fs-xs); line-height: var(--sc-lh-normal); color: var(--sc-fg-muted); }
.sc-mono { font-family: var(--sc-font-mono); font-size: var(--sc-fs-sm); color: var(--sc-fg); }

/* Accent rule + tagline */
.sc-rule { height: 2px; background: var(--sc-lime); border: 0; width: 100%; }
.sc-rule--short { width: 70px; height: 4px; }
.sc-tagline { font-family: var(--sc-font-sans); font-weight: 500; font-size: var(--sc-fs-sm); letter-spacing: var(--sc-ls-wider); text-transform: uppercase; color: var(--sc-accent); }