/* EMPOWER GRE course tokens: the one set every course-theme file draws from. Colors are the GRE landing's (empowertestprep.com, source
   redesign-v28/app/globals.css, its hero and plan card): plum ink #1c1330 and #2a1e3f, orange #e8623a, gold #f2b134, rose #d9577a, teal
   #1f8a84 and its pastels #7bd5d1 and #9ee5e1, violet #7f4b93, cream #fff9f2 under peach, gold and rose glows, the plum card #2a1e3f to
   #553669. Fills carry the color: the orange to gold button with plum ink, the plum card, gold today and stars, teal Quant and done, violet
   Verbal. Text is one solid color at 4.5:1 or more on every ground it sits on (python3 gre-contrast.py checks each pair). Sizes, radii and
   spacing are the ChatGPT Sites concept's (design/chatgpt-sites). A course rule that needs a value not here is wrong, not a new token.
   Only GRE layout templates print body.ea-course, so the tokens sit on that page's root and the html canvas reads them too. */
:root:has(> body.ea-course) {
  /* Type: Manrope, two weights. Sizes are the concept's: page title 47, card titles 22 to 26, body 14 to 15, labels 10 to 12. */
  --font:"Manrope Variable",Manrope,Arial,sans-serif;
  --fs-display:clamp(32px,3.2vw,47px); --fs-title:26px; --fs-card:22px; --fs-lead:17px; --fs-body:15px; --fs-input:15px; --fs-ui:13px; --fs-meta:12px; --fs-small:12px; --fs-label:11px; --fs-tag:10px; --fs-eyebrow:10px;
  --w-r:400; --w-b:700;
  --ls-display:-.055em; --ls-title:-.035em; --ls-card:-.035em; --ls-eyebrow:.12em; --ls-label:.08em; --ls-rule:.09em;
  --lh-display:1.03; --lh-title:1.23; --lh-body:1.6;

  /* Ink: the landing's plum; secondary text and card labels in its violet (#785387, #7f4895); page eyebrows and links rust */
  --ink:#1c1330; --ink-title:#1c1330; --ink-card:#2a1e3f; --ink-row:#2a1e3f; --ink-field:#2a1e3f; --ink-label:#3b2c4f; --ink-back:#5c4868;
  --body:#5c4868; --muted:#704b80; --meta:#6a5079;
  --eyebrow:#a8361a; --eyebrow-card:#7f4895; --link:#a8361a; --blue:#a8361a; --row-on:#a8361a;
  --ok:#1f8a84; --ok-ink:#17726d; --ok-halo:rgba(31,138,132,.16); --ok-bg:#d9f1ee;
  --err:#ad3858; --err-ink:#a3384f; --err-bg:#ffe8ee; --err-line:#f3c9d5;
  --pill-bg:linear-gradient(100deg,#ffe2d2,#ffe6ee); --pill-ink:#b23c17; --check-bg:linear-gradient(100deg,#ffe2d2,#ffe6ee); --check-ink:#b23c17;
  --notice-bg:#fff1cf; --notice-line:#f5d58c; --notice-ink:#7a3a12;
  --mint:#fbb594; --mint-line:rgba(247,162,124,.35); --feature-meta:#e7c7be;

  /* Section and accent colors: teal Quant and done, violet Verbal, gold today, streaks and stars, orange the brand mark */
  --quant:#1f8a84; --quant-ink:#17726d; --quant-tint:#d9f1ee; --quant-light:#7bd5d1;
  --violet:#7f4b93; --verbal:#7f4b93; --verbal-tint:#f0e2f7; --verbal-light:#d9b8ea;
  --gold:#f2b134; --gold-ink:#8a5600; --gold-tint:#fff0cc; --gold-line:#f2c96a;
  --coral:#e8623a; --rose:#d9577a; --orange:#d98a1f; --today:#f2b134;
  --tint-blue:#ffe4d6; --tint-violet:#f0e2f7; --tint-coral:#ffe2d4; --tint-amber:#fff0cc; --hi:#ffe2a8;
  --paper:#fff; --scrim:rgba(28,19,48,.35);

  /* Ground: the landing hero's warm wash, never a flat white: cream to peach to soft rose with peach, gold, rose and a faint violet glow (Justin 10-11:
     "so much monotony in the course. so offputting and snow blindness inducing"); cards are warm tinted surfaces over it */
  --ground:#fff3ea;
  --g-ground:radial-gradient(1100px 640px at 0 0,rgba(247,162,124,.32),transparent 62%),radial-gradient(900px 560px at 100% 2%,rgba(242,177,52,.24),transparent 60%),radial-gradient(1000px 700px at 72% 100%,rgba(217,87,122,.16),transparent 62%),radial-gradient(800px 600px at 18% 72%,rgba(127,75,147,.08),transparent 60%),linear-gradient(132deg,#fff1e9 4%,#ffece4 38%,#fff0de 66%,#ffecf1 104%);

  /* Lines and fields: the landing's lilac hairline, warmed for cream */
  --hair:#eee0e6; --line:#ecdce4; --line-hover:#e7a98e; --line-row:#efe2e7; --line-soft:#f3e9ec; --line-top:#efe3e8; --line-on:#eba184;
  --track:#f1e3ea; --field:#fffaf6; --row-bg:#fff8f3; --row-on-bg:#ffe8dc; --hover-bg:#fff3ec;
  --focus-line:#e8623a; --focus-ring:0 0 0 4px rgba(232,98,58,.18); --focus-outline:3px solid #e8623a;

  /* Fills: the landing's orange to gold button with plum ink, its course gradient on progress, the plum card, the score scale */
  --cta:#c4441c; --cta-hover:#a8391a; --cta-ink:#1c1330; --on-cta:#fff;   /* --cta is the solid rust under white type (the test screen's Go button); --cta-ink is plum on gold */
  /* Buttons, the active nav pill, the avatar and every current marker: white type on a deeper rust to orange (Justin 10-10: "dark content on dark icons"), each stop 4.5:1 with white */
  --g-cta:linear-gradient(107deg,#b23c17,#c4441c 50%,#cf471a); --g-cta-hover:linear-gradient(107deg,#a8391a,#b23c17 50%,#c4441c);
  --cta-shadow:0 10px 24px rgba(232,98,58,.26);
  --g-rule:linear-gradient(90deg,#e8623a,#d9577a);
  --g-track:linear-gradient(90deg,#e8623a,#f2b134,#d9577a);
  --g-quant:linear-gradient(90deg,#1f8a84,#7bd5d1); --g-verbal:linear-gradient(90deg,#7f4b93,#c08ad6); --g-miss:linear-gradient(90deg,#d9577a,#f7a27c);
  --g-score:linear-gradient(90deg,#d9475a,#f2b134 50%,#2e9e72);
  --quiz-ring:#1f8a84; --quiz-ring-fill:rgba(31,138,132,.5); --quiz-ring-track:#f1e3ea; --quiz-ring-track-line:#e3cfd9;  /* the results rings (quiz_blue.js renderChart reads these; Dore blue otherwise) */
  --g-feature:linear-gradient(110deg,#2a1e3f,#3d2a55 57%,#553669);
  /* The landing's dark sections and signature pieces (gre-home.css): the plum band under violet and rose glows, glass cards on it, Writing's rose, the
     two-tone display line (orange to rose on cream, peach to gold to pink on plum; display headlines only, never body text), the product cover card */
  --g-band:radial-gradient(900px 520px at 6% 0,rgba(127,75,147,.26),transparent 62%),radial-gradient(800px 520px at 96% 60%,rgba(217,87,122,.16),transparent 60%),#1c1330;
  --band-glass:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03)); --band-line:1px solid rgba(241,194,179,.24); --band-shadow:0 30px 70px rgba(12,8,22,.35),inset 0 1px 0 rgba(255,255,255,.14);
  --writing:#b33a5c; --g-writing:linear-gradient(90deg,#b33a5c,#f7a27c);
  --g-display:linear-gradient(101deg,#c4441c 4%,#cc4824 38%,#c04565 70%,#7f4b93 100%); --g-display-light:linear-gradient(101deg,#f7a27c 2%,#f2b134 50%,#ef8aa5 96%);
  --g-cover:linear-gradient(145deg,#fff9f2,#fff2ed 58%,#fff4f8); --g-cover-art:radial-gradient(circle at center,#fff 0 32%,transparent 66%); --cover-shadow:0 22px 28px rgba(42,30,63,.2);
  --nav-glass:rgba(255,252,250,.8); --progress-shadow:0 2px 12px rgba(232,98,58,.25);
  --g-panel:var(--card-surface); --g-command:var(--card-bg);

  /* On the plum card: white type, the landing's blush meta and peach labels, pastel teal for done, faint white lines and fills */
  --on-feature-line:rgba(255,255,255,.16); --on-feature-fill:rgba(255,255,255,.07); --on-feature-track:rgba(255,255,255,.16);
  --g-done:linear-gradient(90deg,#7bd5d1,#9ee5e1);

  /* Bars by importance: course and section totals thick, a module medium, a row thin */
  --bar-xl:12px; --bar-l:10px; --bar-m:8px; --bar-s:5px; --ring:92px;

  /* Surfaces: no white box. --surface is warm paper for rows, buttons and tiles; a card is paper going to a soft peach and rose tint with a peach glow behind its
     kicker, the lilac hairline and warm colored shadows, no colored top edge (Justin 10-11: "get rid of gay top border"); Quant and Verbal cards tint toward their section */
  --surface:linear-gradient(160deg,#fff6ef,#ffeee6);
  --card-surface:radial-gradient(520px 200px at 0 0,rgba(247,162,124,.14),transparent 70%),linear-gradient(155deg,#fff6ef,#ffeee6 55%,#ffeaf0);
  --card-bg:var(--card-surface); --g-quant-card:linear-gradient(165deg,#fff6ef 10%,#e3f4ef); --g-mixed:linear-gradient(90deg,#1f8a84,#7f4b93); --g-verbal-card:linear-gradient(165deg,#fff6ef 10%,#f3e6f8);
  --card-line:1px solid rgba(208,176,220,.45); --card-shadow:0 24px 60px rgba(232,98,58,.13),0 10px 28px rgba(217,87,122,.07),0 2px 10px rgba(42,30,63,.04),inset 0 1px 0 rgba(255,255,255,.8);
  --panel-line:1px solid rgba(208,176,220,.45); --panel-shadow:0 16px 40px rgba(232,98,58,.07),0 2px 8px rgba(42,30,63,.03);
  --command-line:1px solid rgba(208,176,220,.45); --command-shadow:0 16px 40px rgba(232,98,58,.07),0 2px 8px rgba(42,30,63,.03);
  --row-shadow:0 10px 24px rgba(42,30,63,.1); --feature-shadow:0 22px 48px rgba(42,30,63,.22); --float-shadow:0 20px 50px rgba(42,30,63,.16);
  --bar-shadow:0 4px 20px rgba(42,30,63,.04);
  --feature-line:1px solid #3d2a55;

  /* Test screen and results colors (gre-test.css, gre-test-q.css, gre-test-result.css), each at 4.5:1 or better */
  --quiz-bar:#006eae; --quiz-link:#006b9a; --quiz-btn:#007cb2; --quiz-grey:#666; --quiz-text:#3a3a3a;

  /* Radii */
  --r-card:24px; --r-command:24px; --r-panel:20px; --r-feature:24px; --r-row:15px; --r-btn:13px; --r-field:10px; --r-note:10px; --r-pill:7px; --r-mark:8px; --r-round:999px;

  /* Spacing */
  --pad-card:30px; --pad-card-sm:20px 18px; --pad-panel:24px; --pad-command:28px; --pad-row:18px 16px; --pad-feature:28px 30px;
  --gap-xs:6px; --gap-s:9px; --gap-m:14px; --gap-l:22px; --gap-xl:32px; --bar-h:76px; --bar-h-sm:68px; --wrap:min(92vw,1800px); --gutter:clamp(20px,3vw,48px);   /* the course uses the screen: 92% of it up to 1800 px (Justin 10-10: "it obv needs to be viewport responsive") */

  /* Motion: the concept's one ease, a 2px lift, a .98 press */
  --t:.18s cubic-bezier(.16,1,.3,1); --press:scale(.98); --lift:translateY(-2px);
  --cta-h:46px; --field-h:44px; --btn-h:44px;
}
