# Design Tokens

> Este archivo es la fuente de verdad para todos los valores exactos.
> `design.md` explica el *por qué* — este archivo solo contiene el *qué*.
> Copiá directamente al `:root {}` de CSS, al `theme.extend` de Tailwind, o a un archivo de constantes JS.

---

## CSS Custom Properties

```css
:root {

  /* ─── COLOR ─────────────────────────────────────────── */

  /* Fondos */
  --color-bg:           #[ HEX ];   /* [ Descripción ] */
  --color-surface:      #[ HEX ];   /* [ Descripción ] */
  --color-[ nombre ]:   #[ HEX ];   /* [ Descripción ] */

  /* Texto */
  --color-text:         #[ HEX ];   /* [ Descripción ] */
  --color-text-muted:   #[ HEX ];   /* [ Descripción ] */
  --color-text-dark:    #[ HEX ];   /* [ Descripción ] */

  /* Acento */
  --color-accent:       #[ HEX ];
  --color-accent-dark:  #[ HEX ];   /* Hover del acento */
  --color-accent-subtle:#[ HEX ][ OPACIDAD ]; /* Fondo tintado */

  /* Bordes */
  --color-border:       #[ HEX ];

  /* ─── TIPOGRAFÍA ─────────────────────────────────────── */

  --font-display: '[ Familia ]', [ fallback ], sans-serif;
  --font-body:    '[ Familia ]', [ fallback ], sans-serif;
  --font-mono:    '[ Familia ]', '[ fallback ]', monospace;

  /* Tamaños */
  --text-display: clamp([ MIN ]px, [ VW ]vw, [ MAX ]px);
  --text-h1:      [ N ]px;
  --text-h2:      [ N ]px;
  --text-h3:      [ N ]px;
  --text-h4:      [ N ]px;
  --text-lg:      [ N ]px;
  --text-base:    [ N ]px;
  --text-sm:      [ N ]px;
  --text-xs:      [ N ]px;
  --text-mono:    [ N ]px;

  /* Pesos */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* Line heights */
  --leading-tight:   [ N ];
  --leading-snug:    [ N ];
  --leading-normal:  [ N ];
  --leading-relaxed: [ N ];
  --leading-body:    [ N ];

  /* Letter spacing */
  --tracking-tightest: [ -N ]em;
  --tracking-tight:    [ -N ]em;
  --tracking-snug:     [ -N ]em;
  --tracking-normal:   0em;
  --tracking-wide:     [ N ]em;
  --tracking-wider:    [ N ]em;
  --tracking-widest:   [ N ]em;

  /* ─── SPACING ────────────────────────────────────────── */

  --space-1: [ N ]px;
  --space-2: [ N ]px;
  --space-3: [ N ]px;
  --space-4: [ N ]px;
  --space-5: [ N ]px;
  --space-6: [ N ]px;
  --space-7: [ N ]px;
  --space-8: [ N ]px;

  /* ─── BORDER RADIUS ──────────────────────────────────── */

  --radius-none: 0px;
  --radius-sm:   [ N ]px;
  --radius-md:   [ N ]px;
  --radius-pill: 100px;

  /* ─── BORDER ─────────────────────────────────────────── */

  --border-width:   [ N ]px;
  --border-default: [ N ]px solid #[ HEX ];

  /* ─── SHADOW ─────────────────────────────────────────── */

  --shadow-float: [ valor ];
  --shadow-photo: [ valor ];

  /* ─── MOTION ─────────────────────────────────────────── */

  --duration-instant: [ N ]ms;
  --duration-fast:    [ N ]ms;
  --duration-base:    [ N ]ms;
  --duration-slow:    [ N ]ms;
  --duration-slower:  [ N ]ms;

  --ease-default: cubic-bezier([ N ], [ N ], [ N ], [ N ]);
  --ease-in:      cubic-bezier([ N ], [ N ], [ N ], [ N ]);
  --ease-out:     cubic-bezier([ N ], [ N ], [ N ], [ N ]);
  --ease-spring:  cubic-bezier([ N ], [ N ], [ N ], [ N ]);
  --ease-linear:  linear;

  /* ─── Z-INDEX ────────────────────────────────────────── */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-top:       9999;

  /* ─── BREAKPOINTS ────────────────────────────────────── */

  /* Referencia — no se pueden usar en @media directamente */
  --bp-sm:  [ N ]px;
  --bp-md:  [ N ]px;
  --bp-lg:  [ N ]px;
  --bp-xl:  [ N ]px;
  --bp-2xl: [ N ]px;

  /* ─── LAYOUT ─────────────────────────────────────────── */

  --container-max: [ N ]px;
  --prose-max:     [ N ]px;
  --gutter:        [ N ]px;
  --margin-desktop:[ N ]px;
  --margin-mobile: [ N ]px;

}
```

---

## Tailwind Config (theme.extend)

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        bg:            '#[ HEX ]',
        surface:       '#[ HEX ]',
        '[ nombre ]':  '#[ HEX ]',
        accent:        '#[ HEX ]',
        'accent-dark': '#[ HEX ]',
        border:        '#[ HEX ]',
        muted:         '#[ HEX ]',
      },
      fontFamily: {
        display: ['[ Familia ]', '[ fallback ]', 'sans-serif'],
        body:    ['[ Familia ]', '[ fallback ]', 'sans-serif'],
        mono:    ['[ Familia ]', '[ fallback ]', 'monospace'],
      },
      fontSize: {
        'display': ['clamp([ N ]px, [ N ]vw, [ N ]px)', { lineHeight: '[ N ]', letterSpacing: '[ N ]em' }],
        'h1':      ['[ N ]px', { lineHeight: '[ N ]', letterSpacing: '[ N ]em' }],
        'h2':      ['[ N ]px', { lineHeight: '[ N ]', letterSpacing: '[ N ]em' }],
        'h3':      ['[ N ]px', { lineHeight: '[ N ]' }],
        'h4':      ['[ N ]px', { lineHeight: '[ N ]' }],
        'body-lg': ['[ N ]px', { lineHeight: '[ N ]' }],
        'body':    ['[ N ]px', { lineHeight: '[ N ]' }],
        'sm':      ['[ N ]px', { lineHeight: '[ N ]' }],
        'xs':      ['[ N ]px', { lineHeight: '[ N ]' }],
        'mono':    ['[ N ]px', { lineHeight: '[ N ]' }],
      },
      spacing: {
        '1': '[ N ]px', '2': '[ N ]px', '3': '[ N ]px',
        '4': '[ N ]px', '5': '[ N ]px', '6': '[ N ]px',
        '7': '[ N ]px', '8': '[ N ]px',
      },
      borderRadius: {
        none: '0px',
        sm:   '[ N ]px',
        md:   '[ N ]px',
        pill: '100px',
      },
      transitionTimingFunction: {
        'default': 'cubic-bezier([ N ], [ N ], [ N ], [ N ])',
        'spring':  'cubic-bezier([ N ], [ N ], [ N ], [ N ])',
        'in':      'cubic-bezier([ N ], [ N ], [ N ], [ N ])',
        'out':     'cubic-bezier([ N ], [ N ], [ N ], [ N ])',
      },
      transitionDuration: {
        'instant': '[ N ]ms',
        'fast':    '[ N ]ms',
        'base':    '[ N ]ms',
        'slow':    '[ N ]ms',
        'slower':  '[ N ]ms',
      },
      maxWidth: {
        container: '[ N ]px',
        prose:     '[ N ]px',
      },
    },
  },
}
```

---

## JS Constants

```js
// tokens.js
export const colors = {
  bg:         '#[ HEX ]',
  surface:    '#[ HEX ]',
  text:       '#[ HEX ]',
  textMuted:  '#[ HEX ]',
  accent:     '#[ HEX ]',
  accentDark: '#[ HEX ]',
  border:     '#[ HEX ]',
}

export const duration = {
  instant: [ N ],
  fast:    [ N ],
  base:    [ N ],
  slow:    [ N ],
  slower:  [ N ],
}

export const easing = {
  default: [[ N ], [ N ], [ N ], [ N ]],
  spring:  [[ N ], [ N ], [ N ], [ N ]],
  in:      [[ N ], [ N ], [ N ], [ N ]],
  out:     [[ N ], [ N ], [ N ], [ N ]],
}

export const breakpoints = {
  sm:  [ N ],
  md:  [ N ],
  lg:  [ N ],
  xl:  [ N ],
  xxl: [ N ],
}
```