/* Codebelt — design tokens
   Two themes: light (default when OS is light) and dark.
   Brand gradient is reserved for the logo, header hairline, and hero underline. */

:root,
:root[data-theme="light"] {
  --cb-ink:        #1A1320;
  --cb-ink-soft:   #3A3142;
  --cb-muted:      #60566A;
  --cb-bg:         #F7F7F5;
  --cb-bg-soft:    #FBF7F4;
  --cb-bg-sunk:    #F4EEE8;
  --cb-rule:       #EDE6E0;
  --cb-accent:     #D83F75;
  --cb-accent-hover:#B52E62;
  --cb-accent-ink: #FFFFFF;
  --cb-focus-ring: #3757D6;
  --cb-code-bg:    #FBF5F0;
  --cb-code-ink:   #2A1E33;
  --cb-hero-wash-a: rgba(242,107,44,0.10);
  --cb-hero-wash-b: rgba(55,87,214,0.08);

  --cb-syn-kw:   #B52E62;
  --cb-syn-ty:   #3757D6;
  --cb-syn-str:  #6C3F00;
  --cb-syn-num:  #6C3F00;
  --cb-syn-cmt:  #7A7184;
  --cb-syn-fn:   #1A1320;

  --cb-g1: #E8662C;
  --cb-g2: #3757D6;
  --cb-g3: #D83F75;
  --cb-g4: #2DA44E;
  --cb-g5: #8957E5;
}

:root[data-theme="dark"] {
  --cb-ink:        #F3ECE6;
  --cb-ink-soft:   #BDB3BC;
  --cb-muted:      #8F8596;
  --cb-bg:         #0D1117;
  --cb-bg-soft:    #161B22;
  --cb-bg-sunk:    #1C2128;
  --cb-rule:       #2A3038;
  --cb-accent:     #FF5E93;
  --cb-accent-hover:#FF86AE;
  --cb-accent-ink: #0D1117;
  --cb-focus-ring: #8AA2FF;
  --cb-code-bg:    #141820;
  --cb-code-ink:   #EFE6DC;
  --cb-hero-wash-a: rgba(242,107,44,0.14);
  --cb-hero-wash-b: rgba(138,162,255,0.10);

  --cb-syn-kw:   #FF86AE;
  --cb-syn-ty:   #8AA2FF;
  --cb-syn-str:  #F3C48A;
  --cb-syn-num:  #F3C48A;
  --cb-syn-cmt:  #8F8596;
  --cb-syn-fn:   #F3ECE6;

  --cb-g1: #F2884C;
  --cb-g2: #8AA2FF;
  --cb-g3: #FF5E93;
  --cb-g4: #3FB950;
  --cb-g5: #C792FF;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --cb-ink:        #F3ECE6;
    --cb-ink-soft:   #BDB3BC;
    --cb-muted:      #8F8596;
    --cb-bg:         #0D1117;
    --cb-bg-soft:    #161B22;
    --cb-bg-sunk:    #1C2128;
    --cb-rule:       #2A3038;
    --cb-accent:     #FF5E93;
    --cb-accent-hover:#FF86AE;
    --cb-accent-ink: #0D1117;
    --cb-focus-ring: #8AA2FF;
    --cb-code-bg:    #141820;
    --cb-code-ink:   #EFE6DC;
    --cb-hero-wash-a: rgba(242,107,44,0.14);
    --cb-hero-wash-b: rgba(138,162,255,0.10);
    --cb-syn-kw:   #FF86AE;
    --cb-syn-ty:   #8AA2FF;
    --cb-syn-str:  #F3C48A;
    --cb-syn-num:  #F3C48A;
    --cb-syn-cmt:  #8F8596;
    --cb-syn-fn:   #F3ECE6;

    --cb-g1: #F2884C;
    --cb-g2: #8AA2FF;
    --cb-g3: #FF5E93;
    --cb-g4: #3FB950;
    --cb-g5: #C792FF;
  }
}

:root {
  --cb-gradient: linear-gradient(135deg, #F26B2C 0%, #E8452E 28%, #D83F75 60%, #3757D6 100%);

  --cb-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --cb-radius-sm: 6px;
  --cb-radius:    10px;
  --cb-radius-lg: 14px;

  --cb-shadow-card:      0 1px 2px rgba(26,19,32,0.04);
  --cb-shadow-card-hover:0 10px 24px rgba(26,19,32,0.08);

  --cb-maxw: 1100px;
  --cb-gutter: 24px;

  --cb-dur: 150ms;
  --cb-ease: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme="dark"] {
  --cb-shadow-card:      0 1px 2px rgba(0,0,0,0.4);
  --cb-shadow-card-hover:0 10px 24px rgba(0,0,0,0.5);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --cb-shadow-card:      0 1px 2px rgba(0,0,0,0.4);
    --cb-shadow-card-hover:0 10px 24px rgba(0,0,0,0.5);
  }
}