/* ============================================================
   Design tokens.  Light is the base; dark.css re-declares these.
   ============================================================ */

:root {
    /* surfaces */
    --bg:            #ffffff;
    --bg-soft:       #f7f8fa;
    --surface:       #f5f6f8;
    --surface-2:     #ffffff;
    --surface-3:     #eef0f4;
    --overlay:       rgba(15, 17, 21, .45);

    /* text */
    --text:          #18181b;
    --text-strong:   #0b0b0d;
    --muted:         #71717a;
    --muted-2:       #9a9aa3;
    --on-primary:    #ffffff;

    /* lines */
    --border:        #e4e4e7;
    --border-strong: #d3d4d8;

    /* brand */
    --primary:       #d71920;
    --primary-dark:  #a70f16;
    --primary-soft:  #fdecec;
    --primary-ring:  rgba(215, 25, 32, .18);

    /* semantic */
    --success:       #15803d;
    --success-soft:  #e8f6ed;
    --warning:       #b45309;
    --warning-soft:  #fdf2e3;
    --danger:        #b91c1c;
    --danger-soft:   #fdeaea;
    --info:          #1d4ed8;
    --info-soft:     #e9eefc;
    --violet:        #6d28d9;
    --violet-soft:   #f1ebfd;
    --teal:          #0f766e;
    --teal-soft:     #e5f4f2;

    /* code card is dark in both themes */
    --code-bg:       #14161c;
    --code-bg-2:     #1c1f27;
    --code-text:     #e7e9ee;
    --code-muted:    #7c8496;
    --code-border:   #262a34;
    --code-gutter:   #565f75;

    /* radius */
    --radius-sm:     10px;
    --radius:        16px;
    --radius-lg:     22px;
    --radius-pill:   999px;

    /* elevation */
    --shadow-xs:     0 1px 2px rgba(16, 18, 27, .05);
    --shadow-sm:     0 2px 6px rgba(16, 18, 27, .06);
    --shadow:        0 6px 20px rgba(16, 18, 27, .08);
    --shadow-lg:     0 18px 48px rgba(16, 18, 27, .14);

    /* spacing scale */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;

    /* typography */
    --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans", Roboto, Arial, sans-serif;
    --font-tamil: "Noto Sans Tamil", "Nirmala UI", "Latha", "Bamini", sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Mono", "Fira Code", Consolas, "Courier New", monospace;

    --fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15.5px; --fs-md: 17px;
    --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 38px;

    /* reader font size is user controlled */
    --reader-size: 17px;
    --reader-line: 1.85;

    /* layout */
    --header-h:   62px;
    --bottomnav-h:64px;
    --sidebar-w:  268px;
    --content-max:1180px;
    --reader-max: 780px;

    --ease: cubic-bezier(.4, 0, .2, 1);
    --t-fast: .14s var(--ease);
    --t: .22s var(--ease);
}

/* Card family accents — one place decides how every block type looks. */
:root {
    --fam-concept-a:  var(--info);
    --fam-concept-b:  var(--info-soft);
    --fam-code-a:     #3b82f6;
    --fam-io-a:       var(--success);
    --fam-io-b:       var(--success-soft);
    --fam-callout-a:  var(--warning);
    --fam-callout-b:  var(--warning-soft);
    --fam-exam-a:     var(--violet);
    --fam-exam-b:     var(--violet-soft);
    --fam-mcq-a:      var(--primary);
    --fam-mcq-b:      var(--primary-soft);
    --fam-practice-a: var(--teal);
    --fam-practice-b: var(--teal-soft);
    --fam-summary-a:  #0369a1;
    --fam-summary-b:  #e6f2fa;
    --fam-table-a:    #7c3aed;
    --fam-table-b:    #f2ecfe;
    --fam-steps-a:    #b45309;
    --fam-steps-b:    #fdf3e5;
    --fam-lines-a:    #0891b2;
    --fam-lines-b:    #e3f5f9;
    /* explanation is the most frequent card in a lesson, so it stays calm:
       a quiet slate accent that reads as connective tissue, not another alarm */
    --fam-explain-a:  #52607a;
    --fam-explain-b:  #f4f6fa;
}