/* CSS Design Tokens — TScribe */
/* Mirror the Flutter app palette and type scale exactly */

:root {
  /* Brand */
  --brand-primary:        #2A2D74;
  --brand-primary-light:  #3D41A8;
  --brand-primary-bright: #818CF8;
  --brand-primary-dark:   #1A1D55;
  --brand-secondary:      #E0683A;
  --brand-secondary-light:#FF8A5C;
  --brand-secondary-dark: #B84E25;

  /* Semantic */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #3B82F6;

  /* Typography */
  --font-family: 'DM Sans', system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  /* Type scale (px equivalent, rem used in practice) */
  --text-display-lg: 2.5rem;   /* 40px */
  --text-display-sm: 2rem;     /* 32px */
  --text-h1:         1.75rem;  /* 28px */
  --text-h2:         1.5rem;   /* 24px */
  --text-h3:         1.25rem;  /* 20px */
  --text-h4:         1rem;     /* 16px */
  --text-body-lg:    1rem;     /* 16px */
  --text-body:       0.875rem; /* 14px */
  --text-body-sm:    0.8125rem;/* 13px */
  --text-caption:    0.75rem;  /* 12px */

  /* Spacing (4px base scale) */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */

  /* Border radii */
  --radius-xs: 0.25rem; /* 4px  */
  --radius-sm: 0.5rem;  /* 8px  */
  --radius-md: 0.75rem; /* 12px */
  --radius-lg: 1rem;    /* 16px */
  --radius-xl: 1.5rem;  /* 24px */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.10);

  /* Transitions */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   350ms;

  /* Layout */
  --container-max: 1200px;
  --navbar-h: 4rem;
}

/* ===== DARK THEME (default) ===== */
[data-theme="dark"], :root {
  --bg:               #12121E;
  --surface:          #1E1E32;
  --surface-elevated: #252540;
  --text:             #F7F7FC;
  --text-muted:       #C4C4DC;
  --text-faint:       #8888AA;
  --border:           rgba(255,255,255,.07);
  --hairline:         rgba(255,255,255,.05);
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  --bg:               #F4F4FB;
  --surface:          #FFFFFF;
  --surface-elevated: #EBEBF8;
  --text:             #12121E;
  --text-muted:       #68688A;
  --text-faint:       #9999BB;
  --border:           rgba(0,0,0,.08);
  --hairline:         rgba(0,0,0,.05);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.08);
}