/* variables.css — design tokens derived from Rathore Sangam app.config.ts */

:root {
  /* ── Brand / Primary ─────────────────────────────────── */
  --color-primary:           #570013;
  --color-primary-light:     #800020;
  --color-primary-pale:      #FFDADA;
  --color-primary-dark:      #40000B;
  --color-secondary:         #90494D;
  --color-secondary-light:   #FDA3A6;

  /* ── Surfaces ────────────────────────────────────────── */
  --color-background:        #e3e5e7;
  --color-surface:           #F8F9FA;
  --color-surface-low:       #F3F4F5;
  --color-surface-high:      #E7E8E9;
  --color-surface-lowest:    #FFFFFF;

  /* ── Text ────────────────────────────────────────────── */
  --color-text-primary:      #191C1D;
  --color-text-secondary:    #584141;
  --color-text-muted:        #8C7071;
  --color-text-on-primary:   #FFFFFF;

  /* ── Borders & Dividers ──────────────────────────────── */
  --color-border:            #E0BFBF;
  --color-divider:           #F0E1E1;

  /* ── Semantic ────────────────────────────────────────── */
  --color-success:           #2E7D32;
  --color-error:             #BA1A1A;
  --color-warning:           #F57F17;

  /* ── Border Radius (app: sm=8, md=12, lg=16, xl=24) ─── */
  --radius-sm:               8px;
  --radius-md:               12px;
  --radius-lg:               16px;
  --radius-xl:               24px;
  --radius-pill:             9999px;

  /* ── Spacing (app: xs=4, sm=8, md=16, lg=24, xl=32, xxl=48) ── */
  --space-xs:                4px;
  --space-sm:                8px;
  --space-md:                16px;
  --space-lg:                24px;
  --space-xl:                32px;
  --space-xxl:               48px;

  /* ── Typography (app font scale) ────────────────────── */
  --font-family:             -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xxs:           10px;
  --font-size-xs:            11px;
  --font-size-sm:            13px;
  --font-size-md:            15px;
  --font-size-lg:            18px;
  --font-size-xl:            22px;
  --font-size-xxl:           28px;
  --font-size-hero:          32px;

  /* ── Elevation / Shadows ─────────────────────────────── */
  --shadow-sm:               0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:               0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg:               0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.07);

  /* ── Motion ──────────────────────────────────────────── */
  --transition-fast:         150ms ease;
  --transition-base:         250ms ease;

  /* ── Layout ──────────────────────────────────────────── */
  --header-height:           64px;
  --container-max:           1200px;
  --content-max:             860px;
}

/* ── Dark Theme ───────────────────────────────────────── */
[data-theme="dark"] {
  --color-primary:           #FFB4A9;
  --color-primary-light:     #FFDADA;
  --color-primary-pale:      #3A0009;
  --color-primary-dark:      #FFDADA;
  --color-secondary:         #FFB3B6;

  --color-background:        #0D0D0D;
  --color-surface:           #141414;
  --color-surface-low:       #1E1E1E;
  --color-surface-high:      #282828;
  --color-surface-lowest:    #1A1A1A;

  --color-text-primary:      #F2F2F2;
  --color-text-secondary:    #D0BABA;
  --color-text-muted:        #9A7A7A;
  --color-text-on-primary:   #2D0000;

  --color-border:            #3D2828;
  --color-divider:           #281A1A;

  --color-success:           #81C784;
  --color-error:             #E57373;
  --color-warning:           #FFB74D;

  --shadow-sm:               0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-md:               0 4px 12px rgba(0, 0, 0, 0.50);
  --shadow-lg:               0 8px 24px rgba(0, 0, 0, 0.60);
}