/* ============================================================
   colors.css — mirrors library/lib/src/theme/colors.dart
   ============================================================
   AppColors.light is the default :root scheme; AppColors.dark
   activates via `prefers-color-scheme: dark` (the web equivalent
   of the Flutter app picking by Brightness).

   Every field of AppColors.light / AppColors.dark is exposed as
   a CSS variable named after its ColorScheme field. Identical
   values are repeated in dark mode to match the Dart source
   literally — drift will then be visible in either file.
   ============================================================ */

:root {
  /* ----- AppColors.light --------------------------------------- */
  --color-background:             #FFFFFF;
  --color-foreground:             #222222;
  --color-card:                   #FFFFFF;
  --color-card-foreground:        #222222;
  --color-popover:                #FFFFFF;
  --color-popover-foreground:     #222222;
  --color-primary:                #FF4428;
  --color-primary-foreground:     #FFFFFF;
  --color-secondary:              #222222;
  --color-secondary-foreground:   #FFFFFF;
  --color-muted:                  #EFEFEF;
  --color-muted-foreground:       #999999;
  --color-accent:                 #F7F7F7;
  --color-accent-foreground:      #222222;
  --color-destructive:            #EE4444;
  --color-destructive-foreground: #FFFFFF;
  --color-border:                 #E0E0E0;
  --color-input:                  #FFFFFF;
  --color-ring:                   #FF4428;

  /* Chart palette (chart1..chart5 + chartGridLight) */
  --color-chart-1:    #FF4428;
  --color-chart-2:    #27AE52;
  --color-chart-3:    #2797FF;
  --color-chart-4:    #FC964D;
  --color-chart-5:    #0B67BC;
  --color-chart-grid: #D0D0D0;

  /* Text selection (AppColors.selectionHighlight = iosActiveBlue @ 0.4) */
  --color-selection: rgba(0, 122, 255, 0.40);

  /* Warm orange gradient used in feature/practice boxes. */
  --gradient-warm: linear-gradient(135deg, #FF8559 0%, #FFC59A 50%, #FFF4E8 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ----- AppColors.dark --------------------------------------- */
    --color-background:             #15171A;
    --color-foreground:             #FFFFFF;
    --color-card:                   #1F2125;
    --color-card-foreground:        #FFFFFF;
    --color-popover:                #1F2125;
    --color-popover-foreground:     #FFFFFF;
    --color-primary:                #FF4428;
    --color-primary-foreground:     #FFFFFF;
    --color-secondary:              #FFFFFF;
    --color-secondary-foreground:   #222222;
    --color-muted:                  #292B2F;
    --color-muted-foreground:       #8F9295;
    --color-accent:                 #1D1F23;
    --color-accent-foreground:      #FFFFFF;
    --color-destructive:            #EE4444;
    --color-destructive-foreground: #FFFFFF;
    --color-border:                 #343639;
    --color-input:                  #1F2125;
    --color-ring:                   #343639;

    --color-chart-1:    #FF4428;
    --color-chart-2:    #27AE52;
    --color-chart-3:    #2797FF;
    --color-chart-4:    #FC964D;
    --color-chart-5:    #0B67BC;
    --color-chart-grid: #4C4E52;

    --gradient-warm: linear-gradient(135deg, #FF6D45 0%, #FF9668 50%, #C95B3C 100%);
  }
}

/* Manual override via data-theme attribute (set by the theme toggle).
   data-theme="dark" forces dark regardless of system; data-theme="light"
   already excludes the @media block above, keeping the :root defaults. */
:root[data-theme="dark"] {
  --color-background:             #15171A;
  --color-foreground:             #FFFFFF;
  --color-card:                   #1F2125;
  --color-card-foreground:        #FFFFFF;
  --color-popover:                #1F2125;
  --color-popover-foreground:     #FFFFFF;
  --color-primary:                #FF4428;
  --color-primary-foreground:     #FFFFFF;
  --color-secondary:              #FFFFFF;
  --color-secondary-foreground:   #222222;
  --color-muted:                  #292B2F;
  --color-muted-foreground:       #8F9295;
  --color-accent:                 #1D1F23;
  --color-accent-foreground:      #FFFFFF;
  --color-destructive:            #EE4444;
  --color-destructive-foreground: #FFFFFF;
  --color-border:                 #343639;
  --color-input:                  #1F2125;
  --color-ring:                   #343639;

  --color-chart-1:    #FF4428;
  --color-chart-2:    #27AE52;
  --color-chart-3:    #2797FF;
  --color-chart-4:    #FC964D;
  --color-chart-5:    #0B67BC;
  --color-chart-grid: #4C4E52;

  --gradient-warm: linear-gradient(135deg, #FF6D45 0%, #FF9668 50%, #C95B3C 100%);
}

::selection { background: var(--color-selection); }

/* ----- Light/Dark mode visibility utility --------------------
   Tag two siblings .lm (light) and .dm (dark). Only the one
   matching the active theme is shown. */
.dm { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lm { display: none; }
  :root:not([data-theme="light"]) .dm { display: revert; }
}
:root[data-theme="dark"] .lm { display: none; }
:root[data-theme="dark"] .dm { display: revert; }