/* DFYN Atelier — Color System
   ------------------------------------------------------------------
   Pulled from the DFYN Atelier portfolio site + the studio's body of
   work: an electric-violet anchor, a playful trio of circle-button
   accents (magenta, orange, teal), and a warm celebratory extended set
   (gold, coral, denim-blue) seen across birthday cards & infographics.
   Saturated, confident, joyful. Backgrounds stay near-white gray so the
   color does the talking. */

:root {
  /* ---- Brand core ---- */
  --violet-900: #2A1A7A;
  --violet-700: #3E25C9;
  --violet-600: #5B3DF5;   /* PRIMARY — the site's top accent bar */
  --violet-500: #7257F7;
  --violet-300: #B6A8FB;
  --violet-100: #E7E2FE;
  --violet-050: #F3F1FE;

  /* ---- Playful accent trio (the circle nav buttons) ---- */
  --magenta-600: #A23E99;
  --magenta-500: #B14FA8;  /* "Resume" button */
  --magenta-100: #F1DCEF;

  --orange-600: #E07A1E;
  --orange-500: #EE8B33;   /* "Projects" button */
  --orange-100: #FCE6CF;

  --teal-600: #3FA9A0;
  --teal-500: #57C4BB;     /* "Contact" button */
  --teal-100: #DBF3F0;

  /* ---- Extended celebratory set (from the wider portfolio) ---- */
  --gold-500: #F5C13B;
  --gold-100: #FCEFC6;
  --coral-500: #F2613F;
  --coral-100: #FBD9CF;
  --denim-600: #2E4A9E;    /* the fur-coat-photo blue */
  --denim-100: #D6DDF0;

  /* ---- Neutrals ---- */
  --ink-900: #111111;      /* display black */
  --ink-700: #2E2E2E;
  --ink-500: #5C5C5C;
  --ink-400: #8A8A8A;
  --ink-300: #BDBDBD;
  --ink-200: #DEDEDE;
  --ink-100: #ECECEC;
  --paper:   #F2F2F2;      /* site background gray */
  --charcoal:#272727;      /* MDL monogram plate — elegant dark surface */
  --white:   #FFFFFF;

  /* ---- Semantic aliases ---- */
  --color-primary: var(--violet-600);
  --color-primary-hover: var(--violet-700);
  --color-primary-press: var(--violet-900);
  --color-on-primary: var(--white);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-on-color: var(--white);
  --text-link: var(--violet-600);

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--ink-100);
  --surface-inverse: var(--ink-900);
  --surface-elegant: var(--charcoal);

  --border-subtle: var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong: var(--ink-900);

  --focus-ring: var(--violet-500);

  --success: var(--teal-600);
  --warning: var(--gold-500);
  --danger:  var(--coral-500);
  --info:    var(--violet-600);
}