/* MAIN FONTS */
@font-face {
  font-family: 'Skateblade';
  src: url(../assets/fonts/skateblade/Skateblade-Regular.woff2) format(woff2);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../assets/fonts/spacegrotesk/SpaceGrotesk-Light.woff2') format('woff2'),
        url('SpaceGrotesk-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Case Study 1 */
@font-face {
  font-family: 'Nero';
  src: url('../assets/fonts/nero/Nero.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Oxanium';
  src: url('../assets/fonts/oxanium/Oxanium-ExtraLight.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Case Study 2 */
@font-face{
   font-family: 'Bebas Neue';
   src: url('../assets/fonts/bebasneue/BebasNeue-Regular.woff2') format('woff2');
   font-weight: 400;
   font-display: swap;
}

@font-face{
   font-family: 'Baijamjuree';
   src: url('../assets/fonts/baijamjuree/BaiJamjuree-Bold.woff2') format('woff2');
   font-weight: 400;
   font-display: swap;
}

/* Case Study 3 */
@font-face{
   font-family: 'Raleway Heading';
   src: url('../assets/fonts/raleway/Raleway-Thin.woff2') format('woff2');
   font-weight: 600;
   font-display: swap;
}

@font-face{
   font-family: 'Raleway Body';
   src: url('../assets/fonts/raleway/Raleway-Thin.woff2') format('woff2');
   font-weight: 300;
   font-display: swap;
}

/* Case Study 4 */

/* Bebas Neue */

@font-face{
   font-family: 'Red Hat Display';
   src: url('../assets/fonts/redhatdisplay/RedHatDisplay-Regular.woff2') format('woff2');
   font-weight: 400;
   font-display: swap;
}

:root {
  /* ═══════════════════════════════════════
     PRIMITIVES
     ═══════════════════════════════════════ */

  /* Colors - Neutral */
  --white: #f2f2f2;
  --neutral-50: #eee;
  --neutral-100: #ccc;
  --neutral-200: #aaa;
  --neutral-300: #666;
  --neutral-400: #444;
  --neutral-500: #222;
  --black: #1a1a1a;
  --transparent: #ffffff00;

  /* Colors - Brand — fully monochromatic.
     Accent = black/white depending on context.
     Differentiation through typography, weight, and value. */
  --brand-primary: #000;
  --brand-secondary: #333;
  --brand-accent: var(--black);
  --brand-accent-light: var(--neutral-400);

  /* Colors - Feedback */
  --color-success: #027a48;
  --color-success-bg: #ecfdf3;
  --color-error: #b42318;
  --color-error-bg: #fef3f2;

  /* Typography */
  --font-body: 'Space Grotesk', arial;
  --font-heading: 'Skateblade', sans-serif;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 100px;

  /* Borders */
  --border-width: 1px;
  --divider-width: 1px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;


  /* ═══════════════════════════════════════
     SEMANTIC COLORS
     ═══════════════════════════════════════ */

  --color-text: var(--neutral-500);
  --color-text-alt: var(--white);
  --color-background: var(--white);
  --color-background-alt: var(--neutral-50);
  --color-border: var(--black);
  --color-accent: var(--brand-accent);


  /* ═══════════════════════════════════════
     COMPONENT TOKENS: BUTTONS
     ═══════════════════════════════════════ */

  /* Primary */
  --button-bg: var(--black);
  --button-text: var(--white);
  --button-border-color: var(--white);
  --button-border-width: 2px;
  --button-border-style: solid none solid none;
  --button-radius: var(--radius-lg);
  --button-padding: .75rem 1.5rem;
  --button-padding-small: .5rem 1.25rem;
  --button-font-weight: 500;
  --button-font-size: 1rem;
  --button-transition: all var(--transition-base);

  /* Secondary */
  --button-secondary-bg: var(--black);
  --button-secondary-text: var(--white);

  /* Alternate (on dark backgrounds) */
  --button-alt-bg: var(--white);
  --button-alt-text: var(--black);
  --button-alt-border-color: var(--white);

  /* Link style */
  --button-link-text: var(--color-text);
  --button-link-padding: .25rem 0;


  /* ═══════════════════════════════════════
     COMPONENT TOKENS: TAGS
     ═══════════════════════════════════════ */

  --tag-bg: var(--neutral-50);
  --tag-text: var(--black);
  --tag-border-color: var(--neutral-100);
  --tag-radius: var(--radius-sm);
  --tag-font-size: .875rem;
  --tag-font-weight: 600;


  /* ═══════════════════════════════════════
     COMPONENT TOKENS: FORMS
     ═══════════════════════════════════════ */

  --input-bg: var(--white);
  --input-text: var(--black);
  --input-border-color: var(--black);
  --input-border-width: 1px;
  --input-radius: var(--radius-none);
  --input-padding: .5rem .75rem;
  --input-min-height: 2.75rem;
  --input-font-size: 1rem;
  --input-placeholder-color: var(--neutral-300);
  --input-focus-border-color: var(--brand-accent);
  --input-transition: border-color var(--transition-fast);

  /* Textarea */
  --textarea-min-height: 11.25rem;
  --textarea-padding: .75rem;

  /* Alternate (on dark) */
  --input-alt-bg: var(--transparent);
  --input-alt-text: var(--white);
  --input-alt-border-color: var(--white);
  --input-alt-placeholder-color: rgba(255, 255, 255, 0.6);

  /* Labels */
  --label-font-weight: 400;
  --label-margin-bottom: .5rem;

  /* Messages */
  --form-success-text: var(--color-success);
  --form-success-bg: var(--color-success-bg);
  --form-error-text: var(--color-error);
  --form-error-bg: var(--color-error-bg);


  /* ═══════════════════════════════════════
     COMPONENT TOKENS: ICONS
     ═══════════════════════════════════════ */

  --icon-xxsmall: 1rem;
  --icon-xsmall: 1.5rem;
  --icon-small: 2rem;
  --icon-medium: 3rem;
  --icon-large: 5rem;


  /* ═══════════════════════════════════════
     COMPONENT TOKENS: SHADOWS
     ═══════════════════════════════════════ */

  --shadow-small: 0 4px 8px -2px #0000001a, 0 2px 4px -2px #0000000f;
  --shadow-medium: 0 12px 16px -4px #00000014, 0 4px 6px -2px #00000008;
  --shadow-large: 0 20px 24px -4px #00000014, 0 8px 8px -4px #00000008;


  /* ═══════════════════════════════════════
     COMPONENT TOKENS: LAYOUT
     ═══════════════════════════════════════ */

  --container-large: 80rem;
  --container-medium: 64rem;
  --container-small: 48rem;
  --padding-global: 5%;
  --section-padding-small: 3rem;
  --section-padding-medium: 5rem;
  --section-padding-large: 7rem;
}


/* ═══════════════════════════════════════
   THEMES
   ═══════════════════════════════════════ */

/* Dark mode */
.theme-dark {
  --color-text: var(--neutral-50);
  --color-text-alt: var(--neutral-500);
  --color-background: var(--neutral-500);
  --color-background-alt: var(--neutral-400);
  --color-border: var(--neutral-100);
  --brand-accent: var(--white);
  --brand-accent-light: rgba(255,255,255,.7);
}

/* Brand mode */
.theme-brand {
  --color-text: var(--white);
  --color-background: var(--brand-primary);
  --color-accent: var(--brand-accent);
  --brand-accent: var(--white);
  --brand-accent-light: rgba(255,255,255,.7);
}