/* ==========================================================================
   Knapptype Portfolio — Design Tokens
   
   Convention: Hyphens denote segment boundaries.
   CamelCase joins multi-word descriptors within a segment.
   American English spelling throughout.
   ========================================================================== */


/* ==========================================================================
   Primitives — Colour
   ========================================================================== */

:root {

  /* Black */
  --color-black-500: #1d1d1b;
  --color-black-300: #2d2d2b;
  --color-black-100: #3d3d3b;

  /* White */
  --color-white-500: #ffffff;
  --color-white-300: #f5f5f5;
  --color-white-100: #ebebeb;

  /* Neutral */
  --color-neutral-700: #4a4a48;
  --color-neutral-500: #7a7a78;
  --color-neutral-300: #b0b0ae;
  --color-neutral-100: #d8d8d6;

  /* Yellow */
  --color-yellow-500: #ffed00;
  --color-yellow-300: #fff176;
  --color-yellow-100: #fffde0;


/* ==========================================================================
   Semantic — Surfaces
   ========================================================================== */

  --color-surface-base: var(--color-white-500);
  --color-surface-raised: var(--color-white-300);
  --color-surface-overlay: var(--color-white-100);


/* ==========================================================================
   Semantic — Text
   ========================================================================== */

  --color-text-primary: var(--color-black-500);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-tertiary: var(--color-neutral-500);


/* ==========================================================================
   Semantic — Borders
   ========================================================================== */

  --color-border-default: var(--color-neutral-300);
  --color-border-subtle: var(--color-neutral-100);


/* ==========================================================================
   Semantic — Accent
   Note: Accent has no onLight/onDark split. color-yellow-500 maintains
   sufficient contrast and visual presence on both white and black surfaces.
   This is an intentional simplification — the accent is context-independent
   by design.
   ========================================================================== */

  --color-accent: var(--color-yellow-500);
  --color-accent-hover: var(--color-yellow-300);
  --color-accent-subtle: var(--color-yellow-100);


/* ==========================================================================
   Typography — Families
   ========================================================================== */

  /* Single-family system — Rubik handles both display and body.
     Hierarchy is created through weight variation, not typeface
     switching. Both tokens resolve to the same family so consuming
     CSS can keep its current --typography-family-display and
     --typography-family-body references unchanged. */
  --typography-family-display: 'Rubik', 'Trebuchet MS', sans-serif;
  --typography-family-body: 'Rubik', Helvetica, Arial, sans-serif;


/* ==========================================================================
   Typography — Weights
   ========================================================================== */

  --typography-weight-bold: 700;
  --typography-weight-medium: 500;
  --typography-weight-light: 300;
  --typography-weight-regular: 400;


/* ==========================================================================
   Typography — Size Scale
   Base unit: 1rem = 16px
   ========================================================================== */

  --typography-size-100: 0.75rem;    /* 12px */
  --typography-size-200: 0.875rem;   /* 14px */
  --typography-size-300: 1rem;       /* 16px */
  --typography-size-400: 1.125rem;   /* 18px */
  --typography-size-500: 1.25rem;    /* 20px */
  --typography-size-600: 1.5rem;     /* 24px */
  --typography-size-700: 1.875rem;   /* 30px */
  --typography-size-800: 2.25rem;    /* 36px */
  --typography-size-900: 3rem;       /* 48px */
  --typography-size-1000: 3.75rem;   /* 60px */
  --typography-size-1100: 4.5rem;    /* 72px */


/* ==========================================================================
   Typography — Semantic Scale
   ========================================================================== */

  --typography-h1-family: var(--typography-family-display);
  --typography-h1-weight: var(--typography-weight-bold);
  --typography-h1-size: var(--typography-size-1100);
  --typography-h1-lineHeight: var(--typography-lineHeight-tight);

  --typography-h2-family: var(--typography-family-display);
  --typography-h2-weight: var(--typography-weight-medium);
  --typography-h2-size: var(--typography-size-900);
  --typography-h2-lineHeight: var(--typography-lineHeight-tight);

  --typography-h3-family: var(--typography-family-display);
  --typography-h3-weight: var(--typography-weight-light);
  --typography-h3-size: var(--typography-size-800);
  --typography-h3-lineHeight: var(--typography-lineHeight-snug);

  --typography-h4-family: var(--typography-family-display);
  --typography-h4-weight: var(--typography-weight-light);
  --typography-h4-size: var(--typography-size-700);
  --typography-h4-lineHeight: var(--typography-lineHeight-snug);

  --typography-h5-family: var(--typography-family-display);
  --typography-h5-weight: var(--typography-weight-light);
  --typography-h5-size: var(--typography-size-600);
  --typography-h5-lineHeight: var(--typography-lineHeight-snug);

  --typography-body-family: var(--typography-family-body);
  --typography-body-weight: var(--typography-weight-regular);
  --typography-body-size: var(--typography-size-300);
  --typography-body-size-large: var(--typography-size-400);
  --typography-body-lineHeight: var(--typography-lineHeight-normal);
  --typography-body-lineHeight-large: var(--typography-lineHeight-relaxed);

  --typography-small-size: var(--typography-size-200);
  --typography-label-size: var(--typography-size-100);


/* ==========================================================================
   Typography — Line Heights
   ========================================================================== */

  --typography-lineHeight-tight: 1.15em;
  --typography-lineHeight-snug: 1.3em;
  --typography-lineHeight-normal: 1.5em;
  --typography-lineHeight-relaxed: 1.75em;


/* ==========================================================================
   Spacing Scale
   Base unit: 1rem = 16px
   All values are multiples of 4px
   ========================================================================== */

  --spacing-025: 0.25rem;   /* 4px  */
  --spacing-050: 0.5rem;    /* 8px  */
  --spacing-075: 0.75rem;   /* 12px */
  --spacing-100: 1rem;      /* 16px */
  --spacing-150: 1.5rem;    /* 24px */
  --spacing-200: 2rem;      /* 32px */
  --spacing-300: 3rem;      /* 48px */
  --spacing-400: 4rem;      /* 64px */
  --spacing-600: 6rem;      /* 96px */
  --spacing-800: 8rem;      /* 128px */


/* ==========================================================================
   Border Radius
   ========================================================================== */

  --radius-sm: 0.25rem;     /* 4px  */
  --radius-md: 0.5rem;      /* 8px  */
  --radius-lg: 1rem;        /* 16px */
  --radius-full: 9999px;


/* ==========================================================================
   Shadows
   ========================================================================== */

  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.18);


/* ==========================================================================
   Transitions
   ========================================================================== */

  --transition-fast: 150ms ease;
  --transition-default: 250ms ease;
  --transition-slow: 400ms ease;


/* ==========================================================================
   Z-index Scale
   ========================================================================== */

  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 100;
  --z-header: 200;
  --z-modal: 300;


/* ==========================================================================
   Layout — Max Widths
   ========================================================================== */

  --layout-max-width: 75rem;        /* 1200px */
  --layout-max-width-narrow: 50rem; /* 800px — for text-heavy sections */

}


/* ==========================================================================
   Dark Mode
   Surfaces, text and borders swap.
   Accent remains unchanged — context-independent by design.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface-base: var(--color-black-500);
    --color-surface-raised: var(--color-black-300);
    --color-surface-overlay: var(--color-black-100);

    --color-text-primary: var(--color-white-500);
    --color-text-secondary: var(--color-neutral-300);
    --color-text-tertiary: var(--color-neutral-500);


    --color-border-default: var(--color-neutral-700);
    --color-border-subtle: var(--color-black-100);
  }
}


/* ==========================================================================
   Manual Dark Mode Override
   Applied via .dark-mode class on <html> element for the portfolio
   dark mode toggle, independent of system preference.
   ========================================================================== */

html.dark-mode {
  --color-surface-base: var(--color-black-500);
  --color-surface-raised: var(--color-black-300);
  --color-surface-overlay: var(--color-black-100);

  --color-text-primary: var(--color-white-500);
  --color-text-secondary: var(--color-neutral-300);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-button: var(--color-black-100);

  --color-border-default: var(--color-neutral-700);
  --color-border-subtle: var(--color-black-100);
}

html.light-mode {
  --color-surface-base: var(--color-white-500);
  --color-surface-raised: var(--color-white-300);
  --color-surface-overlay: var(--color-white-100);

  --color-text-primary: var(--color-black-500);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-button: var(--color-black-100);
  --color-border-default: var(--color-neutral-300);
  --color-border-subtle: var(--color-neutral-100);
}