/* ───────────────────────────────────────────────────────────── Design tokens — new-portfolio-maryna GENERATED FROM FIGMA. DO NOT EDIT BY HAND. Source: Figma file kp7hE1flHqsu2k8AyC8Kt7 Regenerate: see scripts/README.md Figma is the source of truth. Hand edits are lost on the next run. Names mirror the Figma variables one to one. ───────────────────────────────────────────────────────────── */ :root { /* Fonts — the files are loaded in the page */ --font-display: "Fraunces", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; /* ── Primitives — the raw palette. Never use these directly. ── */ --amber-50: #FFF9E6; --amber-500: #F59E0B; --amber-900: #884D05; --black: #000000; --green-50: #EFFBF2; --green-500: #22B150; --green-900: #104D24; --neutral-50: #FAFAFA; --neutral-100: #EBEBEB; --neutral-150: #F2F2F2; --neutral-200: #D4D4D4; --neutral-400: #808080; --neutral-500: #666666; --neutral-600: #4D4D4D; --neutral-700: #383838; --neutral-900: #171717; --neutral-925: #1A1A1A; --neutral-950: #0A0A0A; --orange-50: #FDEDEC; --orange-100: #FBD5D2; --orange-200: #F8AEA7; --orange-300: #F6887C; --orange-400: #F55E44; --orange-500: #D8492B; --orange-600: #BA3E24; --orange-700: #932F1A; --orange-800: #681F0F; --orange-900: #3D0E05; --orange-950: #260602; --red-50: #FFEFEF; --red-500: #EF4444; --red-900: #801010; --white: #FFFFFF; /* ── Scale — spacing aliases point here ── */ --scale-0: 0px; --scale-025: 2px; --scale-050: 4px; --scale-075: 6px; --scale-100: 8px; --scale-150: 12px; --scale-200: 16px; --scale-250: 20px; --scale-300: 24px; --scale-400: 32px; --scale-500: 40px; --scale-600: 48px; --scale-700: 56px; --scale-800: 64px; --scale-900: 72px; --scale-1000: 80px; --scale-1100: 88px; --scale-1200: 96px; /* ── Semantic: foreground ── */ --foreground-accent: var(--orange-500); --foreground-disabled: var(--neutral-400); --foreground-primary: var(--neutral-900); --foreground-primary-inverted: var(--white); --foreground-secondary: var(--neutral-600); --foreground-secondary-inverted: var(--neutral-200); --foreground-tertiary: var(--neutral-500); --foreground-tertiary-inverted: var(--neutral-400); /* ── Semantic: background and surface ── */ --bg-accent: var(--orange-600); --bg-disabled: var(--neutral-200); --bg-primary: var(--white); --bg-primary-inverted: var(--neutral-900); --bg-secondary: var(--neutral-50); --bg-secondary-inverted: var(--neutral-500); --bg-tertiary: var(--neutral-100); --bg-tertiary-inverted: var(--neutral-200); --surface-primary: var(--neutral-50); --surface-secondary: var(--white); /* ── Semantic: border ── */ --border-primary: var(--neutral-100); --border-secondary: var(--neutral-200); --border-tertiary: var(--neutral-400); /* ── Component: buttons ── */ --button-ghost-foreground-default: var(--foreground-primary); --button-ghost-foreground-hover: var(--foreground-secondary); --button-ghost-foreground-focus: var(--foreground-tertiary); --button-ghost-foreground-disabled: var(--foreground-disabled); --button-primary-background-default: var(--bg-primary-inverted); --button-primary-background-hover: var(--bg-accent); --button-primary-background-focus: var(--bg-accent); --button-primary-background-disabled: var(--bg-disabled); --button-primary-foreground-default: var(--foreground-primary-inverted); --button-primary-foreground-hover: var(--foreground-primary-inverted); --button-primary-foreground-focus: var(--foreground-primary-inverted); --button-primary-foreground-disabled: var(--foreground-disabled); --button-secondary-background-default: var(--bg-primary); --button-secondary-background-hover: var(--bg-secondary); --button-secondary-background-focus: var(--bg-tertiary); --button-secondary-background-disabled: var(--bg-disabled); --button-secondary-border-default: var(--border-primary); --button-secondary-border-hover: var(--border-primary); --button-secondary-border-focus: var(--border-primary); --button-secondary-border-disabled: var(--border-secondary); --button-secondary-foreground-default: var(--foreground-primary); --button-secondary-foreground-hover: var(--foreground-primary); --button-secondary-foreground-focus: var(--foreground-primary); --button-secondary-foreground-disabled: var(--foreground-disabled); /* ── Component: feedback — defined, not yet used ── */ --feedback-error-background: var(--red-50); --feedback-error-border: var(--red-500); --feedback-error-foreground: var(--red-500); --feedback-success-background: var(--green-50); --feedback-success-border: var(--green-500); --feedback-success-foreground: var(--green-500); --feedback-warning-background: var(--amber-50); --feedback-warning-border: var(--amber-500); --feedback-warning-foreground: var(--amber-500); /* ── Spacing ── */ --spacing-2: var(--scale-025); --spacing-4: var(--scale-050); --spacing-6: var(--scale-075); --spacing-8: var(--scale-100); --spacing-12: var(--scale-150); --spacing-16: var(--scale-200); --spacing-20: var(--scale-250); --spacing-24: var(--scale-300); --spacing-32: var(--scale-400); --spacing-40: var(--scale-500); --spacing-48: var(--scale-600); --spacing-56: var(--scale-700); --spacing-64: var(--scale-800); --spacing-72: var(--scale-900); --spacing-80: var(--scale-1000); --spacing-88: var(--scale-1100); --spacing-96: var(--scale-1200); /* ── Radius ── */ --radius-none: 0px; --radius-sm: 2px; --radius-md: 6px; --radius-full: 9999px; /* ── Breakpoints ── */ --breakpoint-xs: 375px; --breakpoint-sm-2: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1440px; --breakpoint-3xl: 1600px; --breakpoint-4xl: 1920px; /* ── Containers ── */ --container-0: 0px; --container-4xs: 84px; --container-3xs: 220px; --container-2xs: 288px; --container-xs: 320px; --container-sm: 384px; --container-md: 448px; --container-lg: 512px; --container-xl: 600px; --container-2xl: 672px; --container-3xl: 768px; --container-4xl: 900px; --container-5xl: 1024px; --container-6xl: 1152px; --container-7xl: 1280px; /* ── Page layout ── */ --page-width: 1440px; --page-padding: 80px; --content-width: 1280px; --section-padding: 100px; } /* ───────────────────────────────────────────────────────────── Type — one class per Figma text style. Every style is Regular; the system has no bold. ───────────────────────────────────────────────────────────── */ .type-display { font-family: var(--font-display); font-size: 56px; line-height: 60px; letter-spacing: -2px; } .type-heading-1 { font-family: var(--font-display); font-size: 48px; line-height: 56px; letter-spacing: -1.5px; } .type-heading-2 { font-family: var(--font-display); font-size: 40px; line-height: 48px; letter-spacing: -1.5px; } .type-heading-3 { font-family: var(--font-display); font-size: 32px; line-height: 40px; letter-spacing: -0.5px; } .type-heading-4 { font-family: var(--font-display); font-size: 24px; line-height: 32px; letter-spacing: -0.5px; } .type-caption-1 { font-family: var(--font-display); font-size: 16px; line-height: 24px; text-transform: uppercase; } .type-caption-2 { font-family: var(--font-display); font-size: 16px; line-height: 24px; } .type-body { font-family: var(--font-body); font-size: 16px; line-height: 22px; } .type-button-1 { font-family: var(--font-body); font-size: 16px; line-height: 24px; } .type-button-2 { font-family: var(--font-body); font-size: 14px; line-height: 24px; } .type-caption-3 { font-family: var(--font-display); font-size: 12px; line-height: 16px; text-transform: uppercase; } .type-tag { font-family: var(--font-display); font-size: 12px; line-height: 16px; }