/* Kriyasya Devotional — Design System Variables (UI v2)
   "Sacred modern": warm paper, one confident saffron, deep maroon ink,
   gold as a hairline accent only. Canonical tokens are --dv-*; legacy token
   names are aliased to them so existing component CSS keeps working while the
   whole world adopts the new look. See .kiro/steering/devotional-design-system.md */

:root {
    /* ============================================================
       CANONICAL v2 TOKENS (--dv-*)
       ============================================================ */
    /* Brand */
    --dv-saffron:        #B5541B;   /* primary action / accent */
    --dv-saffron-hover:  #934015;
    --dv-saffron-soft:   #D98B4A;   /* light saffron for subtle tints */
    --dv-maroon:         #5A2027;   /* deep headings / ink accent */
    --dv-gold:           #785D20;   /* premium accent + hairlines (never fills) */
    --dv-gold-line:      #C9B892;   /* hairline gold for dividers */

    /* Surfaces */
    --dv-bg:             #FFF9F1;   /* cream page background */
    --dv-surface:        #FFFFFF;   /* elevated cards/sheets */
    --dv-surface-2:      #FFFCF7;   /* card hover */
    --dv-sand:           #F4E7D5;   /* secondary surface / wells */
    --dv-deep:           #1A120C;   /* deep ink surface */

    /* Text */
    --dv-text:           #24201F;   /* main text */
    --dv-text-secondary: #675F5B;   /* secondary text (AA on cream + white) */
    --dv-text-on-saffron:#FFFFFF;
    --dv-text-on-dark:   #F3E9DC;

    /* Lines & status */
    --dv-border:         #E4D7C7;
    --dv-border-strong:  #D9C3A8;
    --dv-success:        #287A4D;
    --dv-success-bg:     rgba(40,122,77,0.08);
    --dv-warning:        #A46013;
    --dv-error:          #B42318;
    --dv-premium:        #785D20;

    /* ============================================================
       LEGACY ALIASES (map old names → new palette, keep CSS working)
       ============================================================ */
    --bg-primary:        var(--dv-bg);
    --bg-secondary:      var(--dv-sand);
    --bg-card:           var(--dv-surface);
    --bg-card-hover:     var(--dv-surface-2);
    --bg-deep:           var(--dv-deep);

    --accent:            var(--dv-saffron);
    --accent-hover:      var(--dv-saffron-hover);
    --accent-light:      var(--dv-saffron-soft);
    --accent-glow:       rgba(181,84,27,0.08);
    --accent-gradient:   var(--dv-saffron);          /* flattened: no gradient */

    --temple-gold:       var(--dv-gold);
    --temple-gold-light: var(--dv-gold-line);
    --gold-gradient:     var(--dv-gold);             /* flattened */

    --spiritual:         var(--dv-maroon);
    --spiritual-light:   #8A3A44;
    --spiritual-glow:    rgba(90,32,39,0.07);

    --success:           var(--dv-success);
    --success-bg:        var(--dv-success-bg);
    --warning:           var(--dv-warning);
    --error:             var(--dv-error);

    --text-primary:      var(--dv-text);
    --text-secondary:    var(--dv-text-secondary);
    --text-muted:        var(--dv-text-secondary);
    --text-hindi:        #1C120B;
    --text-on-accent:    var(--dv-text-on-saffron);
    --text-on-dark:      var(--dv-text-on-dark);

    --border:            var(--dv-border);
    --border-strong:     var(--dv-border-strong);
    --border-card:       var(--dv-border);

    --glass:             rgba(255,252,247,0.92);
    --glass-dark:        rgba(26,18,12,0.85);

    /* === SPACING (4px base — unchanged) === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* === TYPOGRAPHY ===
       UI: Inter; Display: Fraunces; Hindi: Noto (Devanagari always via Noto).
       @font-face for Inter/Fraunces is added only once the woff2 files exist
       (until then these fall back to Georgia/system safely — no 404). */
    --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Fraunces", Georgia, "Noto Sans Devanagari", serif;
    --font-deva:    "Noto Sans Devanagari", var(--font-ui);
    --font-body:    var(--font-ui);
    --font-heading: var(--font-display);

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;      /* 16px floor */
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fs-3xl: 2.75rem;
    --fs-hindi: 1.125rem;
    --fs-hindi-lg: 1.375rem;
    --fs-read: 1.125rem;  /* 18px long-form reading */
    --lh-tight: 1.25;
    --lh-normal: 1.6;
    --lh-relaxed: 1.9;

    /* === RADIUS === */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 999px;

    /* === SHADOWS (subtle only; no glow) === */
    --shadow-sm: 0 1px 2px rgba(36,32,31,0.06);
    --shadow: 0 2px 8px rgba(36,32,31,0.08);
    --shadow-md: 0 6px 18px rgba(36,32,31,0.10);
    --shadow-lg: 0 8px 24px rgba(36,32,31,0.12);
    --shadow-xl: 0 16px 40px rgba(36,32,31,0.16);
    --shadow-glow: var(--shadow);          /* retire glow → subtle elevation */
    --shadow-gold: var(--shadow-sm);
    --shadow-inner: inset 0 1px 2px rgba(36,32,31,0.05);

    /* === ANIMATION === */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 0.15s;
    --duration: 0.22s;
    --duration-slow: 0.4s;
    --duration-slower: 0.6s;

    /* === LAYOUT === */
    --max-width: 1120px;
    --content-width: 720px;
    --nav-height: 64px;
    --header-height: 56px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* === Z-INDEX === */
    --z-nav: 100;
    --z-header: 90;
    --z-modal: 200;
    --z-toast: 300;
    --z-tooltip: 150;
}

/* Dark READING theme (reader-scoped only — no site-wide dark theme in v2) */
.reader-dark {
    --bg-card: #201811;
    --dv-surface: #201811;
    --text-primary: #F3E9DC;
    --text-secondary: #C7B49B;
    --text-hindi: #FFE8C4;
    --border: #3A2E22;
    --border-card: #3A2E22;
}