/* Ordine — web mapping of Notion's semantic design tokens.
   Source and deliberate marketing extensions: docs/DESIGN-TOKENS.md. */
@font-face {
  font-family: Nunito;
  src: url('../assets/fonts/Nunito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Nunito;
  src: url('../assets/fonts/Nunito-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Nunito;
  src: url('../assets/fonts/Nunito-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --color-stone-50: #FAFAF9;
  --color-stone-100: #F5F5F4;
  --color-stone-200: #E7E5E4;
  --color-stone-400: #A8A29E;
  --color-stone-500: #78716C;
  --color-stone-700: #44403C;
  --color-stone-800: #292524;
  --color-stone-900: #1C1917;
  --color-stone-950: #0C0A09;
  --color-ordine-green-100: #DFFFD5;
  --color-ordine-green-500: #0CA750;
  --color-red-400: #F87171;
  --color-red-600: #DC2626;
  --color-white: #FFFFFF;
  --color-black: #000000;

  --color-background: var(--color-stone-950);
  --color-foreground: var(--color-stone-50);
  --color-card: var(--color-stone-900);
  --color-card-foreground: var(--color-stone-50);
  --color-popover: var(--color-stone-800);
  --color-popover-foreground: var(--color-stone-50);
  --color-primary: var(--color-ordine-green-500);
  --color-primary-foreground: var(--color-stone-50);
  --color-secondary: var(--color-stone-800);
  --color-secondary-foreground: var(--color-stone-50);
  --color-muted: var(--color-stone-800);
  --color-muted-foreground: var(--color-stone-400);
  --color-accent: var(--color-stone-700);
  --color-accent-foreground: var(--color-stone-50);
  --color-border: var(--color-stone-700);
  --color-input: var(--color-stone-900);
  --color-ring: var(--color-stone-500);
  --color-destructive: var(--color-red-400);
  --color-destructive-foreground: var(--color-white);
  --color-text-dark: var(--color-stone-900);
  --color-text-light: var(--color-stone-50);

  --font-body: Nunito, Arial, sans-serif;
  --font-body-medium: Nunito, Arial, sans-serif;
  --font-body-bold: Nunito, Arial, sans-serif;
  --font-heading: Poppins, Arial, sans-serif;
  --font-heading-bold: Poppins, Arial, sans-serif;
  --weight-body: 400;
  --weight-body-medium: 500;
  --weight-body-bold: 700;
  --weight-heading-bold: 700;
  --text-caption: 12px;
  --text-label: 12px;
  --text-small: 14px;
  --text-body: 16px;
  --text-large: 18px;
  --text-lead: 20px;

  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius: var(--radius-md);
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-full: 9999px;
  --border-width: 1px;
  --stroke-width: 2px;

  /* Marketing-specific semantic roles, derived from the shared palette. */
  --color-action-foreground: var(--color-text-dark);
  --color-shadow: var(--color-black);
  --color-device-metal: var(--color-stone-500);
  --color-device-edge: var(--color-stone-400);
  --color-device-shell: var(--color-stone-900);
  --color-device-screen: var(--color-stone-950);
  --color-device-reflection: var(--color-white);
  --color-browser-surface: var(--color-stone-200);
  --color-browser-text: var(--color-stone-700);
  --color-brand-tint: var(--color-ordine-green-100);
  --text-display: clamp(48px, 5.25vw, 74px);
  --text-section: clamp(36px, 3.8vw, 52px);
}

.light-section {
  --color-background: var(--color-white);
  --color-foreground: var(--color-stone-950);
  --color-card: var(--color-white);
  --color-card-foreground: var(--color-stone-950);
  --color-popover: var(--color-white);
  --color-popover-foreground: var(--color-stone-950);
  --color-secondary: var(--color-ordine-green-100);
  --color-secondary-foreground: var(--color-ordine-green-500);
  --color-muted: var(--color-stone-100);
  --color-muted-foreground: var(--color-stone-500);
  --color-accent: var(--color-stone-100);
  --color-accent-foreground: var(--color-stone-900);
  --color-border: var(--color-stone-200);
  --color-input: var(--color-stone-200);
  --color-ring: var(--color-stone-500);
  --color-destructive: var(--color-red-600);
}