Design System
Open Logistics Synergy

{
  // ═══ OLS DESIGN TOKENS v1.0 · W3C DTCG · BRAND_DESIGNER v7 ═══
  // fuente: BRAND_IDENTITY_CLIENTE inline | WCAG 2.1 verificado | Mayo 2026

  "color": {
    "primary": {
      "50":  { "$value": "#F0ECF8", "$type": "color", "$description": "Primary 50 — tint fondo sutil" },
      "100": { "$value": "#DDD3F0", "$type": "color", "$description": "Primary 100" },
      "200": { "$value": "#BBA6E1", "$type": "color", "$description": "Primary 200" },
      "300": { "$value": "#9979D0", "$type": "color", "$description": "Primary 300" },
      "400": { "$value": "#7A59BE", "$type": "color", "$description": "Primary 400" },
      "500": { "$value": "#6A47A8", "$type": "color", "$description": "Primary 500" },
      "600": { "$value": "#5B3A8B", "$type": "color", "$description": "PRIMARY BASE — CR 8.30:1 on #FAFAFA (AAA) | CR 7.23:1 on #F5E9D7 (AA) | PROHIBIDO texto sobre #0E0E12 (CR 2.22:1)" },
      "700": { "$value": "#4A2E72", "$type": "color", "$description": "Primary 700" },
      "800": { "$value": "#3A2259", "$type": "color", "$description": "Primary 800 — CR 11.28:1 on #F5E9D7 (AAA)" },
      "900": { "$value": "#2A1540", "$type": "color", "$description": "Primary 900" },
      "950": { "$value": "#190C27", "$type": "color", "$description": "Primary 950 — near-black purple" }
    },
    "secondary": {
      "50":  { "$value": "#FDF8F2", "$type": "color", "$description": "Secondary 50" },
      "100": { "$value": "#F5E9D7", "$type": "color", "$description": "SECONDARY BASE warm cream — CR #0E0E12 on this: 16.07:1 (AAA) | CR #5B3A8B on this: 7.23:1 (AA)" },
      "200": { "$value": "#EACFAE", "$type": "color", "$description": "Secondary 200" },
      "300": { "$value": "#DDB385", "$type": "color", "$description": "Secondary 300" },
      "900": { "$value": "#2E200C", "$type": "color", "$description": "Secondary 900" }
    },
    "accent": {
      "50":  { "$value": "#FDF6E3", "$type": "color", "$description": "Accent 50" },
      "300": { "$value": "#ECC96D", "$type": "color", "$description": "Accent 300" },
      "400": { "$value": "#E0B84D", "$type": "color", "$description": "ACCENT BASE gold — CR 10.21:1 on #0E0E12 (AAA large) | PROHIBIDO texto pequeño sobre #FAFAFA (CR 1.81:1)" },
      "500": { "$value": "#CCA332", "$type": "color", "$description": "Accent 500" },
      "700": { "$value": "#7A5B00", "$type": "color", "$description": "Accent 700 TEXT-SAFE — CR 6.05:1 on #FAFAFA (AA) | CR 5.27:1 on #F5E9D7 (AA) — usar para texto dorado en fondos claros" },
      "900": { "$value": "#3A2A00", "$type": "color", "$description": "Accent 900" }
    },
    "neutral": {
      "50":  { "$value": "#F8F8F8", "$type": "color", "$description": "Neutral 50" },
      "100": { "$value": "#F0F0F0", "$type": "color", "$description": "Neutral 100" },
      "200": { "$value": "#D8D8D8", "$type": "color", "$description": "Neutral 200 — borders light" },
      "400": { "$value": "#989898", "$type": "color", "$description": "Neutral 400 — placeholder" },
      "600": { "$value": "#585858", "$type": "color", "$description": "Neutral 600 — secondary text" },
      "900": { "$value": "#141414", "$type": "color", "$description": "Neutral 900 — primary text light mode" },
      "950": { "$value": "#0E0E12", "$type": "color", "$description": "Neutral 950 = color.surface.dark.bg — CR #FAFAFA: 18.45:1 (AAA)" }
    },
    "semantic": {
      "success":      { "$value": "#22C55E", "$type": "color", "$description": "Success green badge/icon" },
      "success-text": { "$value": "#166534", "$type": "color", "$description": "Success text CR 6.76:1 on white AA" },
      "warning":      { "$value": "#F59E0B", "$type": "color", "$description": "Warning amber badge/icon" },
      "warning-text": { "$value": "#92400E", "$type": "color", "$description": "Warning text CR 6.22:1 on white AA" },
      "error":        { "$value": "#EF4444", "$type": "color", "$description": "Error red badge/icon" },
      "error-text":   { "$value": "#991B1B", "$type": "color", "$description": "Error text CR 5.30:1 on white AA" },
      "info":          { "$value": "#3B82F6", "$type": "color", "$description": "Info blue badge/icon" },
      "info-text":    { "$value": "#1E40AF", "$type": "color", "$description": "Info text CR 6.45:1 on white AA" }
    },
    "surface": {
      "dark": {
        "bg":        { "$value": "#0E0E12", "$type": "color", "$description": "Fondo principal dark mode" },
        "elevated":  { "$value": "#161620", "$type": "color", "$description": "Cards, modals sobre bg dark" },
        "elevated2": { "$value": "#1E1E2C", "$type": "color", "$description": "Hover states dark" }
      },
      "light": {
        "bg":      { "$value": "#FAFAFA", "$type": "color", "$description": "Fondo principal light — CR vs #0E0E12: 18.45:1 (AAA)" },
        "warm":    { "$value": "#F5E9D7", "$type": "color", "$description": "Fondo cálido secciones featured" },
        "border":  { "$value": "#E8E0F0", "$type": "color", "$description": "Border sutil light mode" }
      }
    }
  },

  "typography": {
    "fontFamily": {
      "heading": { "$value": "'Playfair Display', Georgia, serif", "$type": "fontFamily", "$description": "H1-H3, Display, Pull Quotes — Google Fonts SIL OFL gratuita" },
      "body":    { "$value": "'Inter', -apple-system, BlinkMacSystemFont, sans-serif", "$type": "fontFamily", "$description": "Body, UI, Labels — Google Fonts SIL OFL gratuita" },
      "mono":    { "$value": "'JetBrains Mono', 'Courier New', monospace", "$type": "fontFamily", "$description": "Códigos HS, pedimentos, referencias técnicas" }
    },
    "fontSize": {
      "xs":  { "$value": "12px", "$type": "dimension", "$description": "Labels, caps, metadata" },
      "sm":  { "$value": "14px", "$type": "dimension", "$description": "Captions, secondary text" },
      "base":{ "$value": "16px", "$type": "dimension", "$description": "Body text — base reference" },
      "lg":  { "$value": "18px", "$type": "dimension", "$description": "Lead text" },
      "xl":  { "$value": "20px", "$type": "dimension", "$description": "Pull quotes" },
      "2xl": { "$value": "24px", "$type": "dimension", "$description": "H3" },
      "3xl": { "$value": "32px", "$type": "dimension", "$description": "H2" },
      "4xl": { "$value": "40px", "$type": "dimension", "$description": "H1" },
      "5xl": { "$value": "48px", "$type": "dimension", "$description": "Display LG" },
      "6xl": { "$value": "64px", "$type": "dimension", "$description": "Display XL · Hero" }
    },
    "fontWeight": {
      "regular":  { "$value": "400", "$type": "fontWeight", "$description": "Body, captions" },
      "medium":   { "$value": "500", "$type": "fontWeight", "$description": "Labels, navigation" },
      "semibold": { "$value": "600", "$type": "fontWeight", "$description": "H2-H3, CTA" },
      "bold":     { "$value": "700", "$type": "fontWeight", "$description": "H1, display" }
    },
    "lineHeight": {
      "tight":   { "$value": "1.1",  "$type": "number", "$description": "Display XL" },
      "snug":    { "$value": "1.25", "$type": "number", "$description": "H1-H2" },
      "normal":  { "$value": "1.5",  "$type": "number", "$description": "H3, lead" },
      "relaxed": { "$value": "1.7",  "$type": "number", "$description": "Body text" }
    },
    "letterSpacing": {
      "heading": { "$value": "-0.02em", "$type": "dimension", "$description": "Display, H1" },
      "body":    { "$value": "0",       "$type": "dimension", "$description": "Body text" },
      "label":   { "$value": "0.03em", "$type": "dimension", "$description": "Button labels" },
      "caps":    { "$value": "0.08em", "$type": "dimension", "$description": "Uppercase section labels" }
    }
  },

  "spacing": {
    "1": {"$value":"4px","$type":"dimension"}, "2": {"$value":"8px","$type":"dimension"}, "3": {"$value":"12px","$type":"dimension"},
    "4": {"$value":"16px","$type":"dimension"}, "5": {"$value":"20px","$type":"dimension"}, "6": {"$value":"24px","$type":"dimension"},
    "8": {"$value":"32px","$type":"dimension"}, "10":{"$value":"40px","$type":"dimension"}, "12":{"$value":"48px","$type":"dimension"},
    "16":{"$value":"64px","$type":"dimension"}, "20":{"$value":"80px","$type":"dimension"}, "24":{"$value":"96px","$type":"dimension"}
  },

  "borderRadius": {
    "none": {"$value":"0px","$type":"dimension"},   "sm":  {"$value":"4px","$type":"dimension"},
    "md":  {"$value":"8px","$type":"dimension"},   "lg":  {"$value":"12px","$type":"dimension"},
    "xl":  {"$value":"16px","$type":"dimension"},  "2xl": {"$value":"24px","$type":"dimension"},
    "full":{"$value":"9999px","$type":"dimension"}
  },

  "shadow": {
    "sm":  {"$value":"0 1px 4px rgba(0,0,0,0.30)","$type":"shadow"},
    "md":  {"$value":"0 4px 12px rgba(0,0,0,0.40)","$type":"shadow"},
    "lg":  {"$value":"0 8px 24px rgba(0,0,0,0.50)","$type":"shadow"},
    "xl":  {"$value":"0 12px 40px rgba(91,58,139,0.25)","$type":"shadow","$description":"Branded purple glow"},
    "2xl": {"$value":"0 24px 80px rgba(91,58,139,0.35)","$type":"shadow","$description":"Hero emphasis"}
  },

  "motion": {
    "duration": {
      "fast":  {"$value":"150ms","$type":"duration","$description":"Hover, focus rings"},
      "base":  {"$value":"250ms","$type":"duration","$description":"Standard UI transitions"},
      "slow":  {"$value":"400ms","$type":"duration","$description":"Page transitions"},
      "xslow": {"$value":"600ms","$type":"duration","$description":"Hero reveals, storytelling"}
    },
    "easing": {
      "enter":    {"$value":"cubic-bezier(0.0,0.0,0.2,1)","$type":"cubicBezier"},
      "exit":     {"$value":"cubic-bezier(0.4,0.0,1.0,1)","$type":"cubicBezier"},
      "standard": {"$value":"cubic-bezier(0.4,0.0,0.2,1)","$type":"cubicBezier"}
    }
  }
}