/*
Theme Name: Lets Trading — Light
Template: lets-trading
Description: Light, blue-accented UI for the Indian Quant trading platform. Rebuilds the front-end design system around a white-surface / navy-text / blue-primary palette with generous whitespace, flat cards and a wide type scale, following the layout conventions of modern SaaS trading products.
Author: Indian Quant
Version: 1.0.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lets-trading-light
*/

/* =========================================================
   DESIGN TOKENS — light system
   The parent theme is ~92% var()-driven, so redefining these
   re-skins the great majority of the front end in one place.
   The parent uses two token families: the bg- and text- prefixed
   ones in its stylesheets, and the color- prefixed ones inline in
   templates. Both are defined here so neither is left undefined.
   ========================================================= */
:root {
    /* ---- Brand ---- */
    --color-primary:        #2563EB;
    --color-primary-hover:  #1D4ED8;
    --color-primary-soft:   #EFF4FF;
    --color-secondary:      #0B1524;
    --color-accent:         #2563EB;
    --color-success:        #0EA47A;
    --color-danger:         #E5484D;

    /* ---- Background layers ---- */
    --bg-base:              #FFFFFF;
    --bg-surface:           #FFFFFF;
    --bg-card:              #FFFFFF;
    --bg-card-hover:        #F7F9FC;
    --bg-hover:             #EEF3FA;
    --bg-subtle:            #F7F9FC;

    /* ---- Text ---- */
    --text-primary:         #0B1524;
    --text-secondary:       #4A5A70;
    --text-muted:           #64748B;
    --text-on-primary:      #FFFFFF;

    /* ---- Borders & elevation ---- */
    --border-color:         #E4E9F0;
    --border-strong:        #CFD8E3;
    --border-focus:         #2563EB;
    --shadow-card:          0 1px 2px rgba(11, 21, 36, .04), 0 8px 24px rgba(11, 21, 36, .06);
    --shadow-card-hover:    0 2px 4px rgba(11, 21, 36, .06), 0 16px 40px rgba(11, 21, 36, .10);
    --shadow-sm:            0 1px 2px rgba(11, 21, 36, .06);

    /* ---- Aliases used inline in parent templates ---- */
    --color-bg:             #FFFFFF;
    --color-bg-secondary:   #F7F9FC;
    --color-text:           #0B1524;
    --color-text-muted:     #64748B;
    --color-border:         #E4E9F0;

    /* ---- Typography ---- */
    --font-sans:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:            'JetBrains Mono', 'Fira Code', monospace;

    /* ---- Spacing (wider rhythm than the parent's) ---- */
    --spacing-xs:           4px;
    --spacing-sm:           8px;
    --spacing-md:           16px;
    --spacing-lg:           24px;
    --spacing-xl:           48px;
    --spacing-2xl:          88px;

    /* ---- Radius ---- */
    --radius-sm:            6px;
    --radius-md:            10px;
    --radius-lg:            14px;
    --radius-xl:            20px;
}

/* Keep the parent's optional light-mode toggle consistent with the above. */
body.light-mode {
    --bg-base:      #FFFFFF;
    --bg-surface:   #FFFFFF;
    --bg-card:      #FFFFFF;
    --bg-card-hover:#F7F9FC;
    --bg-hover:     #EEF3FA;
    --text-primary: #0B1524;
    --text-secondary:#4A5A70;
    --text-muted:   #64748B;
    --border-color: #E4E9F0;
    --shadow-card:  0 1px 2px rgba(11, 21, 36, .04), 0 8px 24px rgba(11, 21, 36, .06);
}