/* ============================================================
   MindFile Design System — Colors & Type
   Source: annetklo/mindfile-mr (tailwind.config.ts + src/index.css)
   ============================================================ */

/* ---- Webfonts (Google Fonts) ---- */
@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-VariableFont_opsz_wght.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: block; }
@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-Italic-VariableFont_opsz_wght.ttf") format("truetype"); font-weight: 200 800; font-style: italic; font-display: block; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: block; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 200 800; font-style: italic; font-display: block; }

:root {
  /* ============================================================
     COLOR TOKENS — dark-only system
     ============================================================ */

  /* Surfaces (deep midnight navy ladder) */
  --surface:           #0f141b;   /* default page bg */
  --surface-lowest:    #090e16;
  --surface-low:       #171c24;   /* alternating section bg */
  --surface-mid:       #1b2028;   /* card / popover */
  --surface-high:      #252a33;   /* muted, accent, chip */
  --surface-highest:   #30353e;   /* card hover, glass tint */

  /* Foreground */
  --on-surface:           #dee2ee;   /* primary text */
  --on-surface-variant:   #c5c6cc;   /* secondary text */
  --on-surface-muted:     #8f9096;   /* tertiary text / icons */

  /* Outlines */
  --outline:           #8f9096;
  --outline-variant:   #45474c;

  /* Brand — Periwinkle (the heart of the brand) */
  --primary:              #c1c1fe;   /* italic accents, icons, ring */
  --primary-foreground:   #2a2b5e;   /* text on primary */
  --primary-container:    #1b1b4e;   /* deep periwinkle bg */
  --on-primary:           #2a2b5e;

  /* Brand — Sage (secondary) */
  --secondary:            #bacbbb;
  --secondary-foreground: #0f141b;
  --secondary-container:  #404f42;

  /* Brand — Sand (tertiary, used for eyebrow labels) */
  --tertiary:             #d6c5a5;
  --tertiary-container:   #29200b;

  /* Semantic */
  --destructive:           #ffaeae;   /* hsl(0 84% 84%) */
  --destructive-foreground:#0f141b;
  --background:            var(--surface);
  --foreground:            var(--on-surface);
  --card:                  var(--surface-mid);
  --card-foreground:       var(--on-surface);
  --popover:               var(--surface-mid);
  --popover-foreground:    var(--on-surface);
  --muted:                 var(--surface-high);
  --muted-foreground:      var(--on-surface-muted);
  --accent:                var(--surface-high);
  --accent-foreground:     var(--on-surface);
  --border:                #45474c;
  --input:                 #45474c;
  --ring:                  var(--primary);

  /* Signature gradients */
  --gradient-cta:       linear-gradient(135deg, #c1c1fe 0%, #bacbbb 100%);
  --gradient-cta-hover: linear-gradient(135deg, #d0d0ff 0%, #c8d8c9 100%);
  --gradient-cta-alt:   linear-gradient(135deg, #c1c1fe 0%, #1b1b4e 100%);

  /* Hero radial wash (used behind video bg) */
  --hero-wash:
    radial-gradient(at 30% 20%, rgba(193, 193, 254, 0.08) 0%, transparent 50%),
    radial-gradient(at 70% 80%, rgba(186, 203, 187, 0.05) 0%, transparent 50%);

  /* Accent quote bar (sand → fade) */
  --quote-bar: linear-gradient(to bottom, #d6c5a5, rgba(214, 197, 165, 0.25));

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  --font-headline: "Newsreader", Georgia, serif;            /* serif display */
  --font-body:     "Plus Jakarta Sans", system-ui, sans-serif; /* UI / body */

  /* Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Tracking */
  --tracking-eyebrow: 0.15em;     /* uppercase eyebrow labels */
  --tracking-tight:   -0.01em;    /* logo / display */

  /* ============================================================
     SHAPE / RADII
     ============================================================ */
  --radius:        0.75rem;       /* 12px — root */
  --radius-sm:     calc(var(--radius) - 4px);   /* 8px  — chips, small */
  --radius-md:     calc(var(--radius) - 2px);   /* 10px — inputs */
  --radius-lg:     var(--radius);               /* 12px — buttons */
  --radius-xl:     1rem;                        /* 16px — small cards */
  --radius-2xl:    1.5rem;                      /* 24px — glass cards, navbar */
  --radius-3xl:    2rem;                        /* 32px — hero CTA card */
  --radius-pill:   9999px;                      /* avatars, popular badge */

  /* ============================================================
     SPACING — Tailwind 4-px scale (most-used)
     ============================================================ */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px — section gutter */
  --space-8: 2rem;      /* 32px — card padding */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px — header→grid */
  --space-24: 6rem;     /* 96px — section py mobile */
  --space-32: 8rem;     /* 128px — section py desktop */

  /* ============================================================
     ELEVATION — soft glass + glow
     ============================================================ */
  --glass-bg:     rgba(48, 53, 62, 0.4);
  --glass-border: 1px solid rgba(255, 255, 255, 0.06);
  --glass-blur:   blur(20px);

  --shadow-glow-primary: 0 0 40px rgba(193, 193, 254, 0.08);
  --shadow-blur-primary: 0 0 120px rgba(193, 193, 254, 0.05);  /* CTA section halo */
  --shadow-blur-tertiary:0 0 120px rgba(214, 197, 165, 0.05);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);   /* tailwind default */
  --dur-fast:     200ms;
  --dur-normal:   300ms;
}

/* ============================================================
   SEMANTIC TYPE PRESETS
   Use these classes (or copy the rules) in any HTML artifact.
   ============================================================ */

/* Eyebrow — uppercase sand-colored label that opens every section */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;          /* text-xs */
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tertiary);
}

/* Display — hero h1 */
.t-display {
  font-family: var(--font-headline);
  font-weight: var(--weight-medium);
  font-size: clamp(2.25rem, 5vw, 4.5rem);  /* 36 → 72 */
  line-height: 1.1;
  color: var(--on-surface);
}

/* Section h2 — “What you get”, “Pricing”, etc. */
.t-h2 {
  font-family: var(--font-headline);
  font-weight: var(--weight-medium);
  font-size: clamp(1.875rem, 3.5vw, 3rem);  /* 30 → 48 */
  line-height: 1.15;
  color: var(--on-surface);
}

/* Quote / poetic problem statement (italic serif) */
.t-quote {
  font-family: var(--font-headline);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.5;
  color: rgba(197, 198, 204, 0.6);   /* on-surface-variant/60 */
}

/* Card title — sans-serif inside cards */
.t-card-title {
  font-family: var(--font-body);
  font-size: 1.25rem;             /* text-xl */
  font-weight: var(--weight-semibold);
  color: var(--on-surface);
}

/* Body — default paragraph */
.t-body {
  font-family: var(--font-body);
  font-size: 1.125rem;            /* text-lg used in lead paragraphs */
  font-weight: var(--weight-regular);
  line-height: 1.6;
  color: rgba(197, 198, 204, 0.7); /* on-surface-variant/70 */
}

/* Body small — card descriptions */
.t-body-sm {
  font-family: var(--font-body);
  font-size: 0.875rem;            /* text-sm */
  font-weight: var(--weight-regular);
  line-height: 1.6;
  color: rgba(197, 198, 204, 0.6);
}

/* Caption — footer microcopy */
.t-caption {
  font-family: var(--font-body);
  font-size: 0.75rem;             /* text-xs */
  color: rgba(197, 198, 204, 0.5);
}

/* Logo wordmark */
.t-logo {
  font-family: var(--font-headline);
  font-size: 1.125rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--on-surface);
}

/* ============================================================
   SIGNATURE UTILITIES
   ============================================================ */

.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
}

.gradient-cta {
  background: var(--gradient-cta);
  color: var(--surface);
}
.gradient-cta:hover { background: var(--gradient-cta-hover); }