/**
 * Si Artes — Design tokens (mirrors Design System tokens/)
 * Loaded on front + editor so CSS components always have variables.
 */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Mulish:wght@400;500;600;700;800&display=swap');

@font-face {
	font-family: 'Titulo';
	src: url('../fonts/titulo.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Brand purple ramp */
	--sa-plum-900: #3d0c3d;
	--sa-plum-800: #571357;
	--sa-plum-700: #6f1a6f;
	--sa-purple-600: #902090;
	--sa-purple-500: #a635a6;
	--sa-magenta-400: #c25ec2;
	--sa-orchid-300: #d98ed9;
	--sa-lilac-200: #ecc4ec;
	--sa-pink-100: #f8e2f8;
	--sa-pink-50: #ffe4ff;

	/* Fundo gradient stops */
	--sa-fundo-top: #ffbbff;
	--sa-fundo-bottom: #ffddff;

	/* Floral accents */
	--sa-violet: #604080;
	--sa-berry: #a0406a;
	--sa-plum-ink: #602040;

	/* Warm neutrals */
	--sa-ink: #2a1a2a;
	--sa-ink-soft: #4c3a4c;
	--sa-mute-700: #6e5c6e;
	--sa-mute-500: #907e90;
	--sa-mute-300: #c3b3c3;
	--sa-line-200: #eed6ee;
	--sa-line-100: #f4e6f4;
	--sa-cream: #fffafd;
	--sa-white: #ffffff;

	/* Semantic */
	--sa-success: #4c8c5a;
	--sa-success-bg: #e5f2e8;
	--sa-warning: #b5791f;
	--sa-warning-bg: #f9eed8;
	--sa-danger: #b23b5e;
	--sa-danger-bg: #fbe4ec;
	--sa-info: var(--sa-violet);
	--sa-info-bg: #ece6f5;

	/* Aliases */
	--sa-text-heading: var(--sa-plum-800);
	--sa-text-body: var(--sa-ink);
	--sa-text-muted: var(--sa-mute-700);
	--sa-text-inverse: var(--sa-white);
	--sa-text-brand: var(--sa-purple-600);
	--sa-text-link: var(--sa-purple-600);
	--sa-text-link-hover: var(--sa-plum-800);

	--sa-surface-page: var(--sa-pink-50);
	--sa-surface-card: var(--sa-white);
	--sa-surface-raised: var(--sa-cream);
	--sa-surface-sunken: var(--sa-pink-100);
	--sa-surface-brand: var(--sa-purple-600);
	--sa-surface-brand-soft: var(--sa-pink-100);

	--sa-border: var(--sa-line-200);
	--sa-border-strong: var(--sa-lilac-200);
	--sa-border-brand: var(--sa-orchid-300);

	--sa-brand: var(--sa-purple-600);
	--sa-brand-hover: var(--sa-plum-700);
	--sa-brand-press: var(--sa-plum-800);
	--sa-focus-ring: color-mix(in srgb, var(--sa-purple-600) 45%, transparent);

	/* Typography */
	--sa-font-display: 'Titulo', 'Monotype Corsiva', 'Segoe Script', cursive;
	--sa-font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
	--sa-font-sans: 'Mulish', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	--sa-font-body: var(--sa-font-serif);
	--sa-font-ui: var(--sa-font-sans);

	--sa-text-2xs: 11px;
	--sa-text-xs: 12px;
	--sa-text-sm: 14px;
	--sa-text-md: 16px;
	--sa-text-lg: 19px;
	--sa-text-xl: 23px;
	--sa-text-2xl: 28px;
	--sa-text-3xl: 36px;
	--sa-text-4xl: 46px;
	--sa-text-5xl: 60px;
	--sa-text-6xl: 80px;

	--sa-fw-regular: 400;
	--sa-fw-medium: 500;
	--sa-fw-semibold: 600;
	--sa-fw-bold: 700;

	--sa-lh-tight: 1.1;
	--sa-lh-snug: 1.25;
	--sa-lh-normal: 1.5;
	--sa-lh-relaxed: 1.7;

	--sa-ls-tight: -0.01em;
	--sa-ls-normal: 0;
	--sa-ls-wide: 0.04em;
	--sa-ls-caps: 0.14em;

	/* Spacing (4px base) */
	--sa-space-0: 0;
	--sa-space-1: 4px;
	--sa-space-2: 8px;
	--sa-space-3: 12px;
	--sa-space-4: 16px;
	--sa-space-5: 20px;
	--sa-space-6: 24px;
	--sa-space-8: 32px;
	--sa-space-10: 40px;
	--sa-space-12: 48px;
	--sa-space-16: 64px;
	--sa-space-20: 80px;
	--sa-space-24: 96px;

	/* Radii */
	--sa-radius-xs: 4px;
	--sa-radius-sm: 8px;
	--sa-radius-md: 12px;
	--sa-radius-lg: 18px;
	--sa-radius-xl: 26px;
	--sa-radius-pill: 999px;

	/* Widths */
	--sa-width-prose: 64ch;
	--sa-width-content: 1080px;
	--sa-width-wide: 1280px;

	/* Controls */
	--sa-control-sm: 32px;
	--sa-control-md: 40px;
	--sa-control-lg: 48px;

	/* Effects */
	--sa-shadow-xs: 0 1px 2px rgba(96, 32, 64, 0.08);
	--sa-shadow-sm: 0 2px 6px rgba(96, 32, 64, 0.10);
	--sa-shadow-md: 0 6px 18px rgba(96, 32, 64, 0.12);
	--sa-shadow-lg: 0 14px 36px rgba(96, 32, 64, 0.16);
	--sa-shadow-brand: 0 10px 26px rgba(144, 32, 144, 0.28);

	--sa-border-width: 1px;
	--sa-border-width-strong: 2px;

	--sa-grad-wash: linear-gradient(180deg, var(--sa-fundo-top) 0%, var(--sa-fundo-bottom) 30%, var(--sa-pink-50) 100%);
	--sa-grad-brand: linear-gradient(135deg, var(--sa-purple-600) 0%, var(--sa-plum-800) 100%);
	--sa-grad-orchid: linear-gradient(135deg, var(--sa-magenta-400) 0%, var(--sa-purple-600) 100%);

	--sa-rule: var(--sa-orchid-300);
	--sa-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--sa-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--sa-dur-fast: 120ms;
	--sa-dur-med: 220ms;
	--sa-dur-slow: 380ms;

	/* DS-compatible aliases (for ported markup) */
	--plum-900: var(--sa-plum-900);
	--plum-800: var(--sa-plum-800);
	--plum-700: var(--sa-plum-700);
	--purple-600: var(--sa-purple-600);
	--purple-500: var(--sa-purple-500);
	--magenta-400: var(--sa-magenta-400);
	--orchid-300: var(--sa-orchid-300);
	--lilac-200: var(--sa-lilac-200);
	--pink-100: var(--sa-pink-100);
	--pink-50: var(--sa-pink-50);
	--fundo-top: var(--sa-fundo-top);
	--fundo-bottom: var(--sa-fundo-bottom);
	--violet: var(--sa-violet);
	--berry: var(--sa-berry);
	--plum-ink: var(--sa-plum-ink);
	--ink: var(--sa-ink);
	--ink-soft: var(--sa-ink-soft);
	--mute-700: var(--sa-mute-700);
	--mute-500: var(--sa-mute-500);
	--mute-300: var(--sa-mute-300);
	--line-200: var(--sa-line-200);
	--line-100: var(--sa-line-100);
	--cream: var(--sa-cream);
	--white: var(--sa-white);
	--text-heading: var(--sa-text-heading);
	--text-body: var(--sa-text-body);
	--text-muted: var(--sa-text-muted);
	--text-inverse: var(--sa-text-inverse);
	--text-brand: var(--sa-text-brand);
	--text-link: var(--sa-text-link);
	--text-link-hover: var(--sa-text-link-hover);
	--surface-page: var(--sa-surface-page);
	--surface-card: var(--sa-surface-card);
	--surface-raised: var(--sa-surface-raised);
	--surface-sunken: var(--sa-surface-sunken);
	--surface-brand: var(--sa-surface-brand);
	--surface-brand-soft: var(--sa-surface-brand-soft);
	--border: var(--sa-border);
	--border-strong: var(--sa-border-strong);
	--border-brand: var(--sa-border-brand);
	--brand: var(--sa-brand);
	--brand-hover: var(--sa-brand-hover);
	--brand-press: var(--sa-brand-press);
	--focus-ring: var(--sa-focus-ring);
	--font-display: var(--sa-font-display);
	--font-serif: var(--sa-font-serif);
	--font-sans: var(--sa-font-sans);
	--font-body: var(--sa-font-body);
	--font-ui: var(--sa-font-ui);
	--radius-xs: var(--sa-radius-xs);
	--radius-sm: var(--sa-radius-sm);
	--radius-md: var(--sa-radius-md);
	--radius-lg: var(--sa-radius-lg);
	--radius-xl: var(--sa-radius-xl);
	--radius-pill: var(--sa-radius-pill);
	--shadow-xs: var(--sa-shadow-xs);
	--shadow-sm: var(--sa-shadow-sm);
	--shadow-md: var(--sa-shadow-md);
	--shadow-lg: var(--sa-shadow-lg);
	--shadow-brand: var(--sa-shadow-brand);
	--grad-wash: var(--sa-grad-wash);
	--grad-brand: var(--sa-grad-brand);
	--grad-orchid: var(--sa-grad-orchid);
	--ease-out: var(--sa-ease-out);
	--dur-fast: var(--sa-dur-fast);
	--dur-med: var(--sa-dur-med);
	--dur-slow: var(--sa-dur-slow);
	--space-1: var(--sa-space-1);
	--space-2: var(--sa-space-2);
	--space-3: var(--sa-space-3);
	--space-4: var(--sa-space-4);
	--space-5: var(--sa-space-5);
	--space-6: var(--sa-space-6);
	--space-8: var(--sa-space-8);
	--space-10: var(--sa-space-10);
	--space-12: var(--sa-space-12);
	--space-16: var(--sa-space-16);
	--space-20: var(--sa-space-20);
	--space-24: var(--sa-space-24);
	--control-sm: var(--sa-control-sm);
	--control-md: var(--sa-control-md);
	--control-lg: var(--sa-control-lg);
	--text-xs: var(--sa-text-xs);
	--text-sm: var(--sa-text-sm);
	--text-md: var(--sa-text-md);
	--text-lg: var(--sa-text-lg);
	--text-xl: var(--sa-text-xl);
	--fw-semibold: var(--sa-fw-semibold);
	--fw-bold: var(--sa-fw-bold);
	--fw-medium: var(--sa-fw-medium);
	--ls-wide: var(--sa-ls-wide);
	--ls-caps: var(--sa-ls-caps);
	--lh-snug: var(--sa-lh-snug);
	--border-width: var(--sa-border-width);
}