/* ============================================================
   Searchmind Design Tokens — tokens.css
   v2.0.0 · 2026-06-19
   Single source of truth for CSS. Link once:
   <link rel="stylesheet" href="https://assets.searchmind.tech/tokens/tokens.css">
   Then use var(--sm-*) everywhere.
   ============================================================ */

/* ---- Fonts ---- */
@font-face { font-family:'AcidGrotesk'; src:url('https://assets.searchmind.tech/font/AcidGrotesk-Thin.otf')       format('opentype'); font-weight:100; font-display:swap; }
@font-face { font-family:'AcidGrotesk'; src:url('https://assets.searchmind.tech/font/AcidGrotesk-ExtraLight.otf') format('opentype'); font-weight:200; font-display:swap; }
@font-face { font-family:'AcidGrotesk'; src:url('https://assets.searchmind.tech/font/AcidGrotesk-Light.otf')      format('opentype'); font-weight:300; font-display:swap; }
@font-face { font-family:'AcidGrotesk'; src:url('https://assets.searchmind.tech/font/AcidGrotesk-Regular.otf')    format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'AcidGrotesk'; src:url('https://assets.searchmind.tech/font/AcidGrotesk-Normal.otf')     format('opentype'); font-weight:450; font-display:swap; }
@font-face { font-family:'AcidGrotesk'; src:url('https://assets.searchmind.tech/font/AcidGrotesk-Medium.otf')     format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'AcidGrotesk'; src:url('https://assets.searchmind.tech/font/AcidGrotesk-Bold.otf')       format('opentype'); font-weight:700; font-display:swap; }

:root {
  /* ---- Core palette ---- */
  --sm-natural:        #fefbf2;  /* page background */
  --sm-dark-green:     #1e2b2b;  /* dark surface + text */
  --sm-lime:           #c6ed62;  /* accent / CTA */
  --sm-text-muted:     #a19986;
  --sm-surface-warm:   #d6cdb6;  /* borders/dividers on light */
  --sm-surface-warm-2: #eae3d1;
  --sm-border-dark:    #1a2525;  /* dividers on dark */
  --sm-white:          #ffffff;  /* card fills only */

  /* ---- Secondary (NOT official pairings — use sparingly) ---- */
  --sm-coral:  #ee6251;
  --sm-olive:  #6a8f4d;
  --sm-gold:   #c5a75c;
  --sm-purple: #953995;

  /* ---- Semantic roles ---- */
  --sm-bg:              var(--sm-natural);
  --sm-text:            var(--sm-dark-green);
  --sm-accent:          var(--sm-lime);
  --sm-cta-bg:          var(--sm-lime);
  --sm-cta-text:        var(--sm-dark-green);
  --sm-dark-bg:         var(--sm-dark-green);
  --sm-dark-text:       var(--sm-natural);
  --sm-card-bg:         var(--sm-white);
  --sm-card-border:     var(--sm-surface-warm);
  --sm-divider:         var(--sm-surface-warm);

  /* ---- Typography ---- */
  --sm-font: 'AcidGrotesk','Trebuchet MS',-apple-system,BlinkMacSystemFont,sans-serif;
  --sm-w-heading: 400;   /* headings deliberately light */
  --sm-w-subhead: 700;
  --sm-w-body:    500;   /* screen/UI body */
  --sm-w-emphasis:700;

  --sm-size-display: 60px;
  --sm-size-h1: 36px;
  --sm-size-h2: 30px;
  --sm-size-h3: 24px;
  --sm-size-h4: 20px;
  --sm-size-body-l: 18px;
  --sm-size-body: 16px;
  --sm-size-small: 15px;
  --sm-size-xs: 14px;
  --sm-size-caption: 12px;
  --sm-letter-spacing: 0.16px;

  /* ---- Spacing (16px base) ---- */
  --sm-space-xs: 4px;
  --sm-space-sm: 8px;
  --sm-space-md: 12px;
  --sm-space: 16px;
  --sm-space-lg: 24px;
  --sm-space-xl: 32px;
  --sm-space-2xl: 48px;
  --sm-space-3xl: 64px;
  --sm-space-4xl: 96px;

  /* ---- Radius ---- */
  --sm-radius-subtle: 4px;
  --sm-radius-tag: 8px;
  --sm-radius-card: 16px;
  --sm-radius-pill: 100px;

  /* ---- Shadows (use sparingly; prefer border on light) ---- */
  --sm-shadow-low:  rgba(0,0,0,0.07) 0 2px 8px 0;
  --sm-shadow-mid:  rgba(0,0,0,0.10) 0 4px 12px 0;
  --sm-shadow-high: rgba(0,0,0,0.15) 0 4px 16px 0;
}

/* ============================================================
   Optional base + components. Drop the @layer below if you only
   want the variables. These give correct on-brand defaults.
   ============================================================ */
@layer searchmind {
  body {
    background: var(--sm-bg);
    color: var(--sm-text);
    font-family: var(--sm-font);
    font-weight: var(--sm-w-body);
    font-size: var(--sm-size-body);
    line-height: 1.6;
  }
  h1,h2,h3,h4 { font-weight: var(--sm-w-heading); letter-spacing: var(--sm-letter-spacing); margin: 0 0 var(--sm-space); }
  h1 { font-size: var(--sm-size-h1); line-height: 40px; }
  h2 { font-size: var(--sm-size-h2); line-height: 37.5px; }
  h3 { font-size: var(--sm-size-h3); line-height: 32px; }
  h4 { font-size: var(--sm-size-h4); line-height: 28px; }

  .sm-btn        { font-family: var(--sm-font); font-weight: var(--sm-w-body); font-size: var(--sm-size-small); border-radius: var(--sm-radius-pill); padding: 12px 24px; border: none; cursor: pointer; }
  .sm-btn-primary{ background: var(--sm-cta-bg); color: var(--sm-cta-text); }
  .sm-btn-dark   { background: var(--sm-dark-green); color: var(--sm-natural); }
  .sm-btn-outline{ background: transparent; color: var(--sm-text); border: 1px solid var(--sm-text); }

  .sm-card       { background: var(--sm-card-bg); color: var(--sm-text); border: 1px solid var(--sm-card-border); border-radius: var(--sm-radius-card); padding: var(--sm-space-lg); }
  .sm-card-dark  { background: var(--sm-dark-green); color: var(--sm-natural); border: none; border-radius: var(--sm-radius-card); padding: var(--sm-space-lg); }

  .sm-section-dark { background: var(--sm-dark-green); color: var(--sm-natural); }
  .sm-highlight    { color: var(--sm-lime); }
}