/* =========================================================
   AWBY Tutoring — Design Tokens
   Single source of truth for color / spacing / type / shape.
   Change values here to re-theme the entire site.
   ========================================================= */

:root {
  /* ---- Brand core (navy) ---- */
  --color-navy-900: #16305c; /* deepest navy — headings, logo ink */
  --color-navy-700: #1b3a6b; /* primary navy — buttons, nav, links */
  --color-navy-600: #244a82; /* hover state for navy elements */
  --color-navy-100: #e8edf5; /* faint navy tint for subtle borders/bg */

  /* ---- Sky accent ---- */
  --color-sky-400: #a9d3ec; /* secondary accent brush-stroke */
  --color-sky-100: #eaf4fb; /* very light sky tint for section backgrounds */

  /* ---- Purple accent (secondary brand color: blue + white + purple) ---- */
  --color-purple-700: #6d28d9; /* deep purple — secondary CTAs, links-on-dark */
  --color-purple-500: #8b5cf6; /* mid purple — decorative shapes, badges, gradients */
  --color-purple-100: #f1eafc; /* very light purple tint for section backgrounds */

  /* ---- Subject pastel accents (icon circle backgrounds) ---- */
  --color-pastel-pink: #f7c9d8; /* Math */
  --color-pastel-mint: #c4ebd9; /* Science */
  --color-pastel-blue: #c7e3f7; /* English */
  --color-pastel-lavender: #ded0fb; /* Study Skills & More — tied to the purple accent family */

  /* ---- Subject VIVID accents (saturated — text-safe on white, used for
     borders, tags, hover states, and anywhere a subject needs to "read"
     as that subject's color at a glance, not just a soft icon tint) ---- */
  --color-vivid-math: #e0457b; /* Math — rose */
  --color-vivid-science: #0f9d68; /* Science — green */
  --color-vivid-english: #1c6fd6; /* English — blue */
  --color-vivid-skills: #7c3aed; /* Study Skills & More — violet */

  /* ---- Neutrals ---- */
  --color-white: #ffffff;
  --color-offwhite: #faf9f6;
  --color-ink: #22262e; /* body text — near-black */
  --color-ink-soft: #4a4f58; /* secondary/muted text */
  --color-border: #e3e6ea;

  /* ---- Semantic ---- */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-offwhite);
  --color-bg-tint: var(--color-sky-100);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-soft);
  --color-text-inverse: var(--color-white);
  --color-primary: var(--color-navy-700);
  --color-primary-strong: var(--color-navy-900);
  --color-primary-hover: var(--color-navy-600);
  --color-accent: var(--color-sky-400);
  --color-secondary: var(--color-purple-700);
  --color-secondary-hover: #5b1fb8;
  --gradient-brand: linear-gradient(135deg, var(--color-navy-700), var(--color-purple-700));
  /* Kept to dark/saturated stops only (no pale tints) so text using this as
     a background-clip fill stays well above the 3:1 large-text contrast
     minimum against a white background at every point in the gradient. */
  --gradient-brand-vivid: linear-gradient(
    100deg,
    var(--color-navy-700) 0%,
    var(--color-purple-700) 50%,
    var(--color-navy-600) 100%
  );

  /* ---- Highlight glows (used ON HOVER as an added ring, not a color swap —
     the element's own color stays the same, a soft brand-colored glow
     appears around it) ---- */
  --glow-navy: 0 0 0 4px rgba(27, 58, 107, 0.16), 0 12px 28px rgba(27, 58, 107, 0.28);
  --glow-purple: 0 0 0 4px rgba(109, 40, 217, 0.16), 0 12px 28px rgba(109, 40, 217, 0.3);
  --glow-math: 0 0 0 4px rgba(224, 69, 123, 0.16), 0 12px 28px rgba(224, 69, 123, 0.3);
  --glow-science: 0 0 0 4px rgba(15, 157, 104, 0.16), 0 12px 28px rgba(15, 157, 104, 0.3);
  --glow-english: 0 0 0 4px rgba(28, 111, 214, 0.16), 0 12px 28px rgba(28, 111, 214, 0.3);
  --glow-skills: 0 0 0 4px rgba(124, 58, 237, 0.16), 0 12px 28px rgba(124, 58, 237, 0.3);

  --color-success-bg: #e4f7ee;
  --color-success-text: #1e6b46;
  --color-error-bg: #fbeaea;
  --color-error-text: #a02f2f;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  /* Signature "blob" shape for buttons — two opposite corners rounded deep,
     two kept sharp. Inspired by a Uiverse.io asymmetric-card interaction
     pattern, scaled down from its original 90px-square-icon proportions to
     work on real text buttons. */
  --radius-blob: 22px 8px 22px 8px;
  --radius-blob-alt: 8px 22px 8px 22px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 2px 8px rgba(22, 48, 92, 0.08);
  --shadow-md: 0 8px 24px rgba(22, 48, 92, 0.12);
  --shadow-lg: 0 16px 40px rgba(22, 48, 92, 0.16);

  /* ---- Typography ---- */
  --font-body: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Outfit", var(--font-body);

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.25rem;
  --text-3xl: clamp(2.25rem, 4vw + 1rem, 3.25rem);
  --text-4xl: clamp(2.75rem, 4vw + 1.75rem, 4.5rem);

  --line-tight: 1.1;
  --line-snug: 1.35;
  --line-normal: 1.65;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 500ms;

  /* ---- Layout ---- */
  --container-max: 1180px;
  --header-height: 76px;
}