/* Readyo · design tokens
 * Brand look: deep navy page, rounded navy cards, lime panels and highlights, white starbursts.
 * Anchored on the Readyo icon (lime squircle, navy bars): lime #C9F05E + navy #06034F. Purple #6B4EF0 only for tiny details.
 * Every colour and font used by site.css comes from this file.
 */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback so the swap doesn't shift the layout (Jakarta vs Arial: +6.6 % width). */
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 106.6%;
  ascent-override: 97.4%;
  descent-override: 20.8%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* Page + cards */
  --color-page:        #06034f;   /* deep navy page behind the cards */
  --color-page-2:      #1b1790;   /* top glow of the page */
  --color-card:        #0b0a33;   /* navy card */
  --color-card-2:      #17155e;   /* raised surface on a navy card */
  --color-sheet:       #fbfcf7;   /* white card (features, legal text) */
  --color-sheet-2:     #f1f3e9;   /* grey tile on the white card */

  /* Text */
  --color-text:        #f7f7fa;   /* on dark */
  --color-text-muted:  #b7b6dc;   /* on navy, 8:1 on the card */
  --color-ink:         #06034f;   /* navy: on white / lime */
  --color-ink-muted:   #4d4d7a;   /* on white, 7:1 */

  /* Lines */
  --color-line:        rgb(255 255 255 / 0.10);
  --color-line-strong: rgb(255 255 255 / 0.18);
  --color-line-ink:    rgb(6 3 79 / 0.10);

  /* Brand */
  --color-lavender:    #c9f05e;   /* brand lime: panels (name kept from the first design) */
  --color-lavender-2:  #dcf78e;   /* lighter panel edge */
  --color-lavender-3:  #aed43a;   /* deeper lime */
  --color-purple:      #6b4ef0;   /* app purple, brand dot */
  --color-link-light:  #4b32c8;   /* links on white, 7.4:1 */
  --color-link-dark:   #dcf78e;   /* links on dark */
  --color-lime:        #c9f05e;   /* primary pills + highlights */
  --color-navy:        #06034f;
  --color-highlight:   #ffe9a8;   /* app highlight (brackets in the better answer) */
  --color-focus:       #c9f05e;
  --color-focus-light: #6b4ef0;
  /* Tool and guide pages (pages.css, tools.css): dark reading surfaces, no off-white sheet */
  --color-field:       #120f4f;   /* inputs on the navy card */
  --color-text-soft:   #d6d5f0;   /* long reading text on the navy card, about 12:1 */
  --color-ink-soft:    #2b2a6e;   /* secondary text on lime, about 9:1 */
  --color-lime-wash:   rgb(201 240 94 / 0.09);
  --color-warn:        #ffa070;   /* time over, warnings on navy */
  --color-rec:         #ff7a6b;   /* recording dot on navy */
  --color-veil:        rgb(255 255 255 / 0.06);   /* chip and note fill on navy */
  --color-veil-2:      rgb(255 255 255 / 0.12);   /* bar track, pressed fill */
  --color-warn-wash:   rgb(255 160 112 / 0.10);

  /* Type: the app's typeface. 500 does the "light" display look, 700/800 only for small accents. */
  --font-body:    "Plus Jakarta Sans", "Jakarta Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-arabic:  "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.125rem;
  --text-lg:      1.375rem;
  --text-xl:      clamp(1.9rem, 2.4vw + 1rem, 3.1rem);
  --text-display: clamp(4.2rem, 7.6vw + 1rem, 8.25rem);

  /* Space */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --page-max:     88rem;
  --page-gutter:  clamp(0.5rem, 1.6vw, 1.75rem);
  --card-pad:     clamp(1.25rem, 5.2vw, 6rem);
  --card-gap:     clamp(0.5rem, 1.6vw, 1.5rem);

  /* Radii */
  --radius-sm:   0.75rem;
  --radius-md:   1.125rem;
  --radius-lg:   1.5rem;
  --radius-card: 1.75rem;   /* ~28 px, the big floating cards */
  --radius-pill: 999px;

  /* Motion */
  --ease:       cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur:        700ms;
  --dur-slow:   900ms;

  --z-raised: 10;
  --z-sticky: 200;
}