/* ============================================================
   CableCast backend — design tokens (My Islam design system,
   colors_and_type.css). Brand blue, Open Sans, 4px spacing.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=JetBrains+Mono:wght@400;600&display=swap");

:root,
[data-theme="light"] {
  --brand:           #007DE0;
  --brand-hover:     #0F8AEC;
  --brand-pressed:   #005FAB;
  --brand-soft:      #E6F8FF;
  --brand-soft-fg:   #005FAB;

  --bg-page:         #FBFCFE;
  --bg-surface:      #FFFFFF;
  --bg-surface-alt:  #FBFCFE;
  --bg-tinted:       #E6F8FF;
  --bg-neutral:      #EDEDED;
  --bg-overlay:      rgba(0, 0, 0, 0.45);
  --bg-glass:        rgba(255, 255, 255, 0.92);

  --fg-1:            #1C1C1C;
  --fg-2:            #74787B;
  --fg-3:            #C1C4C7;
  --fg-on-brand:     #FFFFFF;
  --fg-link:         var(--brand);

  --semantic-negative:    #C24648;
  --semantic-announcement:var(--brand);
  --semantic-success:     #2E8E5A;
  --semantic-warn:        #C58C2A;

  --border-hairline: #E4E4E4;
  --border-strong:   #D9D9D9;
  --border-dashed:   #D9D9D9;
  --separator-brand: rgba(15, 138, 236, 0.20);

  --shadow-card:     0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-medium:   0 5px 15px 5px rgba(0,0,0,0.15);
  --shadow-heavy:    0 -5px 20px 2px rgba(0,0,0,0.10);
  --shadow-elevated: 0 8px 8px rgba(0,0,0,0.30);
  --shadow-premium:  0 4px 10px rgba(0,0,0,0.10);

  --gradient-brand:        linear-gradient(180deg, #2A91EF 0%, #005FAB 100%);
  --gradient-premium-bg:   linear-gradient(180deg, #01325B 0%, #2070B8 100%);
  --gradient-premium-gold: linear-gradient(180deg, #FAE085 0%, #BA9509 100%);
  --premium-border:        rgba(158, 133, 36, 0.7);
}

:root {
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px;
  --radius-xl: 12px; --radius-2xl: 14px; --radius-3xl: 18px;
  --radius-pill: 9999px; --radius-circle: 50%;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 56px; --space-10: 72px;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-quick: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

  --font-display: "Open Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Open Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-section-title: 20px; --fs-feature-heading: 16px; --fs-body: 13px;
  --fs-button: 14px; --fs-button-title: 13px; --fs-caption: 11px;
}

html { color-scheme: light; }

body {
  background: var(--bg-page);
  color: var(--fg-1);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border-hairline);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }