/*
Theme Name: TMD Licente
Theme URI: https://licente.true-media-design.eu
Author: True Media Design - TD Mircea
Author URI: https://true-media-design.eu
Description: Custom standalone block theme for the True Media Design license shop (WooCommerce). Design system "Network Reboot": white canvas, sparse orange signal (#F97316), Inter + JetBrains Mono, hairline borders. No parent theme, no emoji in UI (Feather Icons SVG only).
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tmd-licente
Tags: block-theme, full-site-editing, e-commerce
*/

/*
 * Design tokens live in theme.json (single source of truth). The :root block
 * below mirrors them as classic CSS variables so WooCommerce templates — many
 * of which still use classic CSS — can consume the same values.
 *
 * Fonts are pulled from Google Fonts for now. TODO (GDPR + performance):
 * self-host Inter + JetBrains Mono .woff2 in /fonts/ and swap the enqueue in
 * functions.php for @font-face. Loading fonts from Google's CDN is a known GDPR
 * concern for EU sites — self-hosting resolves it.
 */

:root {
	/* ----- Orange signal ramp ----- */
	--orange-50:  #FFF7ED;
	--orange-100: #FFEDD5;
	--orange-200: #FED7AA;
	--orange-300: #FDBA74;
	--orange-400: #FB923C;
	--orange-500: #F97316; /* brand primary / accent */
	--orange-600: #EA580C;
	--orange-700: #C2410C;

	/* ----- Neutrals (cool grey) ----- */
	--gray-0:   #FFFFFF;
	--gray-50:  #F9FAFB;
	--gray-100: #F3F4F6;
	--gray-200: #E5E7EB;
	--gray-300: #D1D5DB;
	--gray-400: #9CA3AF;
	--gray-500: #6B7280;
	--gray-600: #4B5563;
	--gray-700: #374151;
	--gray-800: #1F2937;
	--gray-900: #111827;
	--gray-950: #0B0F19;

	/* ----- Status ----- */
	--green-500: #16A34A; --green-50: #ECFDF5;
	--red-500:   #DC2626; --red-50:   #FEF2F2;
	--amber-500: #D97706; --amber-50: #FFFBEB;
	--blue-500:  #2563EB; --blue-50:  #EFF6FF;

	/* ----- Semantic aliases ----- */
	--color-primary:        var(--orange-500);
	--color-primary-hover:  var(--orange-600);
	--color-primary-active: var(--orange-700);
	--color-accent:         var(--orange-500);
	--color-accent-soft:    var(--orange-50);

	--color-bg:             var(--gray-0);
	--color-surface:        var(--gray-0);
	--color-surface-sunken: var(--gray-50);
	--color-surface-inset:  var(--gray-100);
	--color-surface-dark:   var(--gray-950);

	--text-primary:    var(--gray-900);
	--text-secondary:  var(--gray-600);
	--text-tertiary:   var(--gray-400);
	--text-on-primary: var(--gray-0);
	--text-on-dark:    var(--gray-0);
	--text-link:       var(--orange-600);
	--signal-on-dark:  var(--orange-400);

	--border-subtle:  var(--gray-200);
	--border-default: var(--gray-300);
	--border-strong:  var(--gray-400);
	--border-dark:    rgba(255, 255, 255, 0.10);

	--status-ok:    var(--green-500);
	--status-warn:  var(--amber-500);
	--status-error: var(--red-500);
	--status-info:  var(--blue-500);

	/* ----- Typography ----- */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

	/* Display / sans scale */
	--text-display-lg: 64px; --text-display-md: 48px; --text-display-sm: 36px;
	--text-title-lg: 28px; --text-title-md: 22px; --text-title-sm: 18px;
	--text-body-lg: 18px; --text-body-md: 16px; --text-body-sm: 14px; --text-caption: 13px;
	/* Mono / label scale */
	--text-label-lg: 13px; --text-label-md: 12px; --text-label-sm: 11px;

	--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
	--lh-tight: 1.04; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6;
	--ls-tight: -0.02em; --ls-normal: 0; --ls-label: 0.04em; --ls-mono: 0.02em;

	/* ----- Spacing (8px grid) ----- */
	--space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
	--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
	--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
	--gap: var(--space-4);
	--card-padding: var(--space-6);
	--section-padding: var(--space-20);

	/* ----- Radii ----- */
	--radius-sm: 4px; --radius-card: 8px; --radius-ctrl: 8px;
	--radius-lg: 12px; --radius-pill: 9999px;

	/* ----- Shadows ----- */
	--shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
	--shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
	--shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08), 0 1px 3px rgba(17, 24, 39, 0.05);
	--shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12), 0 2px 6px rgba(17, 24, 39, 0.06);
	--shadow-focus: 0 0 0 3px rgba(249, 115, 22, 0.25);
	--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

	/* ----- Motion ----- */
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 140ms; --dur-normal: 220ms; --dur-slow: 400ms;

	/* ----- Layout ----- */
	--container-max: 1200px;
	--container-wide: 1440px;
}

/* Focus ring — orange signal glow on any keyboard-focused control. */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/*
 * Mono label helper — technical metadata, statuses, keys, codes.
 * JetBrains Mono, UPPERCASE, +0.04em tracking (per design system rule).
 */
.tmd-label {
	font-family: var(--font-mono);
	font-size: var(--text-label-md, 12px);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	color: var(--text-secondary);
}

/* Dark operational panel — terminal / hero data surfaces. */
.tmd-panel-dark {
	background: var(--color-surface-dark);
	color: var(--text-on-dark);
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-inset);
	/* Subtle dot-grid dither, masked to the top-right corner (design system rule:
	   the only decoration allowed, and only on dark panels). */
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 16px 16px;
	background-position: right -8px top -8px;
}

.tmd-panel-dark .tmd-label { color: var(--signal-on-dark); }

/*
 * ---------------------------------------------------------------------------
 * Components (block patterns consume these via className).
 * ---------------------------------------------------------------------------
 */

/* Product card — white surface, hairline border, hover lift. */
.tmd-product-card {
	background: var(--color-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	padding: var(--card-padding);
	transition: box-shadow var(--dur-normal) var(--ease-out),
		transform var(--dur-normal) var(--ease-out);
}
.tmd-product-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

/* Platform badge — mono metadata pill (WP / WOO / Elementor / Concrete CMS). */
.tmd-badge {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--text-label-sm, 11px);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-subtle);
	background: var(--color-surface-sunken);
	color: var(--text-secondary);
}

/* Price display — big sans amount + mono period. */
.tmd-price { display: flex; align-items: baseline; gap: var(--space-2); }
.tmd-price__amount {
	font-family: var(--font-sans);
	font-size: var(--text-display-sm, 36px);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-tight);
	color: var(--text-primary);
}
.tmd-price__period {
	font-family: var(--font-mono);
	font-size: var(--text-label-md, 12px);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	color: var(--text-tertiary);
}

/* Status pill — license state (active / expiring / revoked / trial). */
.tmd-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: var(--text-label-sm, 11px);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}
.tmd-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tmd-pill--ok    { color: var(--status-ok);    background: var(--green-50); }
.tmd-pill--warn  { color: var(--status-warn);  background: var(--amber-50); }
.tmd-pill--error { color: var(--status-error); background: var(--red-50); }
.tmd-pill--info  { color: var(--status-info);  background: var(--blue-50); }

/* Inline Feather icon — align with text, inherit color. */
.tmd-icon { display: inline-block; vertical-align: -0.125em; }

/*
 * ---------------------------------------------------------------------------
 * DARK MODE SCAFFOLD (inactive — light is the native theme).
 * When/if a dark theme is chosen, activate by remapping the semantic aliases
 * only; component CSS above already consumes them, so no rebuild is needed.
 * ---------------------------------------------------------------------------
 *
 * @media (prefers-color-scheme: dark) {
 *   :root {
 *     --color-bg:            var(--gray-950);
 *     --color-surface:       var(--gray-900);
 *     --color-surface-sunken:var(--gray-800);
 *     --text-primary:        var(--gray-50);
 *     --text-secondary:      var(--gray-400);
 *     --border-subtle:       rgba(255,255,255,0.10);
 *     --border-default:      rgba(255,255,255,0.16);
 *   }
 * }
 */