/* ============================================================
   THE NOEMA PROJECT — Design Tokens
   Locked theme: dark + cobalt
   ============================================================ */

@font-face {
  font-family: 'Syne';
  src: url('../assets/fonts/Syne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('../assets/fonts/Syne-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('../assets/fonts/Syne-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('../assets/fonts/Syne-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DMSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DMSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DMSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand */
  --color-cobalt:      #2457FF;
  --color-cobalt-rgb:  36, 87, 255;

  /* Neutrals */
  --color-near-black:  #1A1A18;
  --color-bone:        #F5F3EE;
  --color-bone-rgb:    245, 243, 238;
  --color-stone:       #8C8C84;
  --color-stone-rgb:   140, 140, 132;
  --color-pure-white:  #FFFFFF;

  /* Surfaces */
  --surface-default:   var(--color-near-black);
  --surface-elevated:  #111110;
  --surface-chrome:    #0E0E0D;

  /* Foreground */
  --fg-primary:        var(--color-bone);
  --fg-secondary:      var(--color-stone);
  --fg-brand:          var(--color-cobalt);

  /* Border */
  --border-default:    rgba(140, 140, 132, 0.18);
  --border-subtle:     rgba(140, 140, 132, 0.12);
  --border-strong:     rgba(140, 140, 132, 0.30);

  /* Type — Display (Syne) */
  --font-display:      'Syne', system-ui, sans-serif;
  --font-body:         'DM Sans', system-ui, sans-serif;
  --font-mono:         'Courier New', 'JetBrains Mono', monospace;

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  160px;

  /* Radius */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-cobalt-sm: 0 0 12px rgba(var(--color-cobalt-rgb), 0.20);
  --shadow-cobalt-md: 0 0 32px rgba(var(--color-cobalt-rgb), 0.30);

  /* Motion */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:  200ms;
  --duration-base:  400ms;
  --duration-slow:  800ms;
  --duration-x-slow: 1200ms;

  /* Layout */
  --container-max:  960px;
  --container-pad:  48px;
  --container-pad-mobile: 24px;

  /* Z-index scale */
  --z-noise:    9999;
  --z-loader:   10000;
  --z-cursor:   10001;
  --z-nav:      100;
}