/* =====================================================================
   Teckid frontend design tokens — single source of truth.

   Loaded once in frontend/master.blade.php (and auth-master) AFTER the
   kidsa main.css. Every frontend section's inline <style> references
   these custom properties instead of hardcoding hex values, so the
   palette, type, radii, shadows, and layout rhythm stay consistent.

   RULE: do not hardcode brand hexes in blade <style> blocks anymore.
   Add or adjust a token here and it propagates everywhere.

   NOTE: illustration SVGs (fill=/stroke= attributes) intentionally keep
   literal hex values — CSS var() cannot resolve inside SVG presentation
   attributes, and those decorative palettes are owned by the artwork.
   ===================================================================== */

:root {
    /* ---- Brand purple -------------------------------------------------- */
    --tk-primary:        #8c0fd4;  /* the brand purple, primary actions/accents */
    --tk-primary-light:  #b94ef0;  /* gradient partner / lighter purple */
    --tk-primary-dark:   #6e0ba6;  /* hover/pressed */
    --tk-primary-deep:   #3d1e6e;  /* deep purple for dark CTA gradients */

    /* ---- Ink & text ---------------------------------------------------- */
    --tk-ink:            #2a1850;  /* headings / darkest text */
    --tk-body:           #5c707e;  /* default body copy */
    --tk-body-strong:    #385469;  /* emphasized body / strong */
    --tk-muted:          #6b7d8a;  /* meta, captions */
    --tk-muted-light:    #9ca3af;  /* faint meta */

    /* ---- Surfaces ------------------------------------------------------ */
    --tk-white:          #ffffff;
    --tk-tint:           #faf6ff;  /* palest purple wash (section backdrops) */
    --tk-tint-2:         #f4eefc;  /* slightly deeper purple wash (chips/cards) */
    --tk-surface-cool:   #f6f7fb;  /* cool light grey section backdrop */

    /* ---- Borders ------------------------------------------------------- */
    --tk-border:         #ece4f7;  /* default light purple hairline */
    --tk-border-strong:  #d8c8ee;  /* heavier light purple border */

    /* ---- Accent: orange ------------------------------------------------ */
    --tk-orange:         #f4793b;
    --tk-orange-light:   #f9a16d;
    --tk-orange-dark:    #b8620e;
    --tk-orange-100:     #fac9af;
    --tk-orange-50:      #ffe4d6;

    /* ---- Accent: pink -------------------------------------------------- */
    --tk-pink:           #e63a8a;
    --tk-pink-light:     #f06bb0;
    --tk-pink-100:       #f4b1d2;
    --tk-pink-50:        #fbd0e0;

    /* ---- Accent: green ------------------------------------------------- */
    --tk-green:          #1ca57e;
    --tk-green-light:    #4fcfa6;
    --tk-green-dark:     #157d5f;
    --tk-green-100:      #a8e0cc;
    --tk-green-50:       #ecfdf5;

    /* ---- Accent: amber ------------------------------------------------- */
    --tk-amber:          #d97706;
    --tk-amber-bright:   #fbbf24;
    --tk-amber-100:      #fcd9a3;
    --tk-amber-50:       #fffbeb;

    /* ---- Status: danger ------------------------------------------------ */
    --tk-danger:         #dc2626;
    --tk-danger-dark:    #991b1b;
    --tk-danger-50:      #fef2f2;

    /* ---- Typography ---------------------------------------------------- */
    --tk-font-heading:   "Quicksand", sans-serif;
    --tk-font-body:      "Source Sans 3", sans-serif;
    --tk-font-hand:      "Kalam", cursive;

    /* ---- Layout rhythm ------------------------------------------------- */
    --tk-container:        1320px;  /* standard content max-width */
    --tk-container-narrow: 1000px;  /* narrower content max-width */
    --tk-section-y:        90px;    /* default section vertical padding */
    --tk-section-y-sm:     60px;    /* compact section vertical padding */
    --tk-gap:              24px;    /* default grid/flex gap */

    /* ---- Radii --------------------------------------------------------- */
    --tk-radius-sm:    14px;
    --tk-radius:       18px;
    --tk-radius-lg:    22px;
    --tk-radius-xl:    24px;
    --tk-radius-pill:  999px;

    /* ---- Shadows ------------------------------------------------------- */
    --tk-shadow-card:   0 14px 32px rgba(42, 24, 80, 0.10);
    --tk-shadow-marker: 0 4px 12px rgba(42, 24, 80, 0.12);
}