/* ==========================================================================
   AscendSAT — design tokens
   Palette + type ramp lifted from cooksat.com's computed styles so the two
   products read as siblings, then re-pointed at Ascend's own accent order.
   ========================================================================== */

:root {
  /* --- Brand blues ------------------------------------------------------ */
  --blue:            #00A6FF;   /* primary CTA, active nav, headers        */
  --blue-hover:      #0098EA;
  --blue-dark:       #027CBE;   /* pressed / 3D bottom edge                */
  --blue-tint:       #EDF9FF;   /* selected nav pill, soft panels          */
  --blue-tint-2:     #DCF1FF;

  --indigo:          #2C76FF;   /* premium tier, secondary emphasis        */
  --indigo-hover:    #1F63E0;
  --indigo-dark:     #1E52B3;
  --indigo-tint:     #EEF4FF;

  /* --- Semantic --------------------------------------------------------- */
  --green:           #22C55E;
  --green-hover:     #1CB253;
  --green-dark:      #16A34A;
  --green-tint:      #ECFDF3;

  --red:             #EF4444;
  --red-dark:        #DC2626;
  --red-tint:        #FEF2F2;

  --amber:           #F59E0B;
  --amber-dark:      #D97706;
  --amber-tint:      #FFFBEB;

  --yellow:          #EAB308;
  --yellow-dark:     #A16207;
  --yellow-tint:     #FEFCE8;

  --orange:          #F97316;
  --orange-dark:     #C2410C;
  --orange-tint:     #FFF3EA;

  --flame:           #FF7A18;
  --purple:          #8B5CF6;
  --purple-dark:     #7C3AED;
  --purple-tint:     #F5F3FF;
  --pink:            #EC4899;
  --teal:            #14B8A6;

  --gold:            #E8B93B;
  --silver:          #B7BCC4;
  --bronze:          #C08A52;

  /* --- Neutrals (Tailwind slate, same as CookSAT) ----------------------- */
  --bg:              #F5F5F5;
  --card:            #FFFFFF;
  --slate-50:        #F8FAFC;
  --slate-100:       #F1F5F9;
  --slate-200:       #E2E8F0;
  --slate-300:       #CBD5E1;
  --slate-400:       #94A3B8;
  --slate-500:       #64748B;
  --slate-600:       #475569;
  --slate-700:       #334155;
  --slate-800:       #1E293B;
  --slate-900:       #0F172A;

  --line:            var(--slate-200);
  --line-strong:     var(--slate-300);
  --ink:             var(--slate-900);
  --ink-2:           var(--slate-600);
  --ink-3:           var(--slate-400);

  /* --- Type ------------------------------------------------------------- */
  --font-brand: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-head:  "Raleway", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* --- Radii (rounded rectangles throughout — pills reserved for chips) - */
  --r-xs:   8px;
  --r-sm:  10px;
  --r:     12px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  24px;
  --pill: 9999px;

  /* --- Elevation (layered + a touch deeper for premium depth) ----------- */
  --sh-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --sh-sm: 0 2px 6px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .05);
  --sh:    0 6px 16px rgba(15, 23, 42, .09), 0 2px 6px rgba(15, 23, 42, .05);
  --sh-lg: 0 16px 40px rgba(15, 23, 42, .14), 0 4px 10px rgba(15, 23, 42, .06);
  --sh-xl: 0 28px 70px rgba(15, 23, 42, .20);
  --sh-blue: 0 6px 18px rgba(0, 166, 255, .32);

  /* --- Motion ------------------------------------------------------------
     --ease      general color/background transitions
     --ease-out  hover lift + press-down on anything tactile (snappy, no
                 overshoot on the way down — the overshoot lives in --spring
                 for entrance animations only)
     --spring    pop-in / toast entrances                                  */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .16s var(--ease-out);
  --t:      .28s var(--ease-out);
  --t-slow: .45s var(--ease-out);
  --t-press: .1s cubic-bezier(.4, 0, 1, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* --- Layout ----------------------------------------------------------- */
  --sidebar-w: 244px;
  --sidebar-w-collapsed: 76px;

  /* The sidebar collapse gets its own curve. --ease-out is deliberately
     front-loaded, which is right for a hover lift but wrong for a size change:
     the rail lunges and then crawls the last few pixels, which reads as a
     stutter rather than a glide. Every property in the collapse — width,
     margin, padding, opacity — shares this one duration and curve so the whole
     rail moves as a single object. */
  --collapse-d: .3s;
  --collapse-e: cubic-bezier(.4, 0, .2, 1);
  --collapse-t: var(--collapse-d) var(--collapse-e);
  --page-max: 1240px;
}

/* Subject accents — Math reads blue, English reads violet, mirroring the way
   the iOS app separates the two tracks. */
:root {
  --math:         var(--blue);
  --math-dark:    var(--blue-dark);
  --math-tint:    var(--blue-tint);
  --english:      #7C5CFF;
  --english-dark: #5B3FD6;
  --english-tint: #F2EEFF;
}

/* Difficulty chips */
:root {
  --diff-e: var(--green);
  --diff-m: var(--amber);
  --diff-h: var(--red);
}