/* ==========================================================================
   VARIABLES.CSS
   This is your control panel. Almost everything you'd want to tweak later
   (colors, fonts, spacing, window chrome) lives here as a CSS custom
   property. Change a value here and it updates everywhere it's used.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
     FONTS
     --------------------------------------------------------------------- */
  --font-display: 'ChicagoFLF', 'Courier New', monospace; /* window titlebars */
  --font-serif:   'EB Garamond', Georgia, serif;           /* your name / big headline */
  --font-sans:    'Inter', -apple-system, sans-serif;      /* everything else */

  /* Font sizes — edit the scale, not individual elements */
  --fs-titlebar:     14px;
  --fs-tag:          15px;   /* the [scubatank] style tag */
  --fs-eyebrow:      22px;   /* "Game Designer // Programmer" */
  --fs-name:         72px;   /* Camilo Soto Cordovez */
  --fs-intro:        22px;   /* intro paragraph */
  --fs-body:         16px;   /* panel paragraph text */
  --fs-label:        18px;   /* Software skill names, card titles */
  --fs-small:        13px;   /* muted meta text, e.g. "2026" */

  /* Font weights — match these to the style names in your Figma file
     (Figma "Light"→300, "Regular"→400, "Medium"→500, "Semibold"→600,
     "Bold"→700, "Heavy"/"Black"→900). Elements reference these tokens
     instead of a raw number, so re-matching Figma later is just editing
     the numbers below. */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    900;

  /* ---------------------------------------------------------------------
     COLORS  (estimated from your Figma screenshot — tweak freely)
     --------------------------------------------------------------------- */
  --color-page-bg:      #606060; /* fallback color, shows before/without an image */
  --page-bg-image:      url('../images/bg/tile.png');    /* set to url('../images/bg-tile.png') to enable */

  --color-window-bg:    #eeeeee; /* main body of every window */
  --color-panel-bg:     #dddddd; /* titlebars + inset sub-panels (resume boxes) */
  --color-panel-hi:     #f8f8f8; /* thin light bevel edge inside borders */

  --color-border:       #262626; /* window / panel borders */
  --color-border-soft:  #999999; /* softer dividing lines, button borders */

  --color-text:         #1a1a1a;
  --color-text-muted:   #6e6e6e;

  --color-accent-start: #5959bf; /* skill bar fill gradient */
  --color-accent-end:   #a6a6ff;
  --color-track:        #bbbbbb; /* skill bar empty track */

  --color-button-bg:    #e4e4e4; /* resume/pdf buttons */
  --color-button-bg-hover: #d0d0d0;

  /* ---------------------------------------------------------------------
     SPACING SCALE
     --------------------------------------------------------------------- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  20px;
  --space-lg:  28px;
  --space-xl:  40px;
  --space-2xl: 56px;

  /* ---------------------------------------------------------------------
     WINDOW CHROME
     --------------------------------------------------------------------- */
  --window-border-width: 2px;
  --window-radius:       0px;      /* keep 0 for the OS-chrome look */
  --window-shadow:       6px 6px 0 rgba(0, 0, 0, 0.35);
  --titlebar-height:     30px;
  --titlebar-stripe-color-a: #cfcfcf;
  --titlebar-stripe-color-b: #e6e6e6;
  --titlebar-stripe-size: 3px;

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --page-max-width: 1500px;
  --grid-gap: var(--space-lg);
  --sidebar-width: 320px; /* Contact / Software column width */
}