/* =====================================================================
   theme.css — Tascer Design Tokens (Single Source of Truth)
   ---------------------------------------------------------------------
   Loaded on EVERY page (in index.php, before the page-specific CSS) so
   every stylesheet can consume the same colours, radii, fonts and
   shadows via var(...).

   Design language: "Dark Minimal" — true-black canvas, soft dark
   surfaces, cyan accent, with a cyan->violet gradient reserved for
   primary CTAs. The richer "Aurora / glass" treatment (aurora glow,
   backdrop-blur cards) stays opt-in for auth pages (login.css) and
   modals — it is NOT applied app-wide here.

   When you need a colour / radius / font: use a token below instead of
   hardcoding a hex. Add new tokens here rather than in page CSS.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{
	/* ---- Surfaces (dark, low -> high elevation) ---- */
	--bg:          #000000;   /* page background                       */
	--surface:     #161616;   /* primary card / panel                  */
	--surface-2:   #1b1b1b;   /* nested / raised element               */
	--surface-3:   #101010;   /* sunken element (code box, inset)      */
	--surface-alt: #111111;   /* list item / subtle alt row            */

	/* ---- Borders / dividers ---- */
	--border:      #232323;   /* default hairline                      */
	--border-soft: #2a2a2a;   /* slightly stronger divider             */

	/* ---- Text ---- */
	--text:        #ffffff;   /* primary text                          */
	--text-soft:   #d7d7d7;   /* body copy                             */
	--text-muted:  #9aa7b3;   /* labels, helpers, secondary            */
	--text-dim:    #8ea0af;   /* faint meta text                       */

	/* ---- Accents ---- */
	--accent:        #8fd2ff;                                  /* cyan — focus, active, links   */
	--accent-strong: #55aaff;                                  /* deeper cyan — board/legacy    */
	--accent-2:      #7b6cff;                                  /* violet — gradient partner     */
	--accent-gradient: linear-gradient(135deg, #3aa0ff 0%, #7b6cff 100%); /* primary CTA */

	/* ---- Muted alias (auth pages reference --muted) ---- */
	--muted:       #9aa7b3;

	/* ---- Glass / auth surfaces (used by login.css aurora theme) ---- */
	--card:        rgba(16, 18, 26, 0.60);   /* glassmorphism card bg */
	--card-edge:   rgba(255, 255, 255, 0.10); /* glass border          */
	--field:       rgba(255, 255, 255, 0.16); /* glass input underline */

	/* ---- Status ---- */
	--danger:      #ff5e5e;
	--danger-soft: #ffb4b4;
	--success:     #43c08a;
	--warning:     #ffb300;

	/* ---- Radii ---- */
	--radius-sm:   10px;   /* inputs, small chips      */
	--radius-card: 14px;   /* cards, panels            */
	--radius-lg:   18px;   /* hero / large surfaces    */
	--radius-pill: 999px;  /* buttons, badges          */

	/* ---- Shadows ---- */
	--shadow-card: 0 4px 16px rgba(0,0,0,.45);
	--shadow-pop:  0 18px 48px -18px rgba(0,0,0,.8);
	--shadow-cta:  0 14px 36px -14px rgba(91,108,255,0.55);

	/* ---- Spacing scale ---- */
	--space-xs: 6px;
	--space-sm: 10px;
	--space-md: 16px;
	--space-lg: 22px;
	--space-xl: 32px;

	/* ---- Typography ---- */
	--font-body:    'Montserrat', system-ui, -apple-system, 'Outfit', sans-serif;
	--font-display: 'Bricolage Grotesque', 'Montserrat', system-ui, sans-serif;
	--font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Icons and floating buttons are controls, never selectable text */
.material-icons,
.btn-floating,
.btn-floating *{
	user-select: none;
	-webkit-user-select: none;
}

/* Primary action buttons — unified gradient pill everywhere
   (reference look: my-profile "Save profile"). Green/blue Materialize
   buttons across the forms all collapse onto this one style. */
.btn.green, .btn-large.green,
.btn.blue, .btn-large.blue{
	border-radius: var(--radius-pill);
	background: var(--accent-gradient) !important;
	box-shadow: var(--shadow-cta);
	text-transform: none;
	font-family: var(--font-body);
	font-weight: 600;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn.green:hover, .btn-large.green:hover,
.btn.blue:hover, .btn-large.blue:hover{
	transform: translateY(-2px);
	filter: brightness(1.06);
}
.btn.red, .btn-large.red{
	border-radius: var(--radius-pill);
	text-transform: none;
	font-weight: 600;
}

/* Unify Materialize's red palette onto the danger token (#ff5e5e) so every
   red in the app uses the same tone (buttons, toasts, text). */
.red,
.red.lighten-1,
.red.lighten-2,
.red.darken-1,
.red.darken-2{
	background-color: var(--danger) !important;
}
.red-text,
.red-text.text-darken-1,
.red-text.text-lighten-1,
.red-text.text-lighten-2{
	color: var(--danger) !important;
}