/*
 * trainitnow-child — Design tokens
 *
 * Single source of truth for the project's design system, ported from the
 * Lovable React/Tailwind source (src/index.css). Divi 5 Design Variables
 * defined in the builder reference these CSS variables via var(--tin-*) so
 * the builder swatches and any custom CSS share one canonical value.
 *
 * Convention: all variables are prefixed with --tin- (TrainItNow).
 * To change a token, edit it here and re-upload the child theme.
 *
 * Light mode only. Dark mode tokens from the Lovable source are intentionally
 * not ported — out of scope for the initial build.
 */

:root {
    /* -- Surfaces -- */
    --tin-background:           hsl(220 20% 97%);   /* page background, off-white blue tint */
    --tin-foreground:           hsl(230 25% 15%);   /* default body text, deep navy */
    --tin-card:                 hsl(0 0% 100%);     /* card surface, pure white */
    --tin-card-foreground:      hsl(230 25% 15%);
    --tin-popover:              hsl(0 0% 100%);
    --tin-popover-foreground:   hsl(230 25% 15%);

    /* -- Brand -- */
    --tin-primary:              hsl(245 50% 48%);   /* indigo, primary CTA + links */
    --tin-primary-foreground:   hsl(0 0% 100%);
    --tin-secondary:            hsl(165 60% 40%);   /* teal, secondary CTA */
    --tin-secondary-foreground: hsl(0 0% 100%);
    --tin-accent:               hsl(245 40% 95%);   /* pale lavender, accent surface */
    --tin-accent-foreground:    hsl(245 50% 48%);

    /* -- State / utility -- */
    --tin-muted:                hsl(220 15% 93%);   /* muted surface (chips, alt rows) */
    --tin-muted-foreground:     hsl(220 10% 46%);   /* muted text (meta, captions) */
    --tin-destructive:          hsl(0 84% 60%);     /* error red */
    --tin-destructive-foreground: hsl(0 0% 100%);
    --tin-ring:                 hsl(245 50% 48%);   /* focus ring, = primary */

    /* -- Borders / inputs -- */
    --tin-border:               hsl(220 15% 90%);
    --tin-input:                hsl(220 15% 90%);

    /* -- Radius (Lovable: --radius = 0.75rem; sm/md/lg derived) -- */
    --tin-radius:               0.75rem;            /* 12px @ 16px base */
    --tin-radius-lg:            var(--tin-radius);
    --tin-radius-md:            calc(var(--tin-radius) - 2px);
    --tin-radius-sm:            calc(var(--tin-radius) - 4px);

    /* -- Shadows -- */
    --tin-shadow-card:
        0 1px 3px hsl(230 25% 15% / 0.06),
        0 4px 12px hsl(230 25% 15% / 0.04);
    --tin-shadow-card-hover:
        0 4px 16px hsl(230 25% 15% / 0.10),
        0 8px 32px hsl(230 25% 15% / 0.06);
    --tin-shadow-elevated:
        0 8px 30px hsl(245 50% 48% / 0.12);

    /* -- Gradients -- */
    --tin-gradient-primary: linear-gradient(135deg, hsl(245 50% 48%), hsl(280 60% 55%));
    --tin-gradient-hero:    linear-gradient(180deg, hsl(220 30% 96%) 0%, hsl(245 40% 95%) 50%, hsl(220 30% 96%) 100%);
    --tin-gradient-cta:     linear-gradient(135deg, hsl(165 60% 40%), hsl(165 50% 35%));

    /* -- Typography -- */
    --tin-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}